Как можно узнать координаты курсора мыши, относительно div, а вернее внутри него?
Потому что если использовать clientX/clientY
или pageX/pageY
, то стоит изменить размер окна браузера и будут другие значения, соответственно, функционал работать не будет.
Или же у другого человека расширение монитора больше и все, функционал не работает.
Узнать координаты блока, из pageX вычесть их - получится относительно блока.
let div = document.querySelector('.coor-demo');
let divRect = div.getBoundingClientRect();
console.log( JSON.stringify( divRect ) );
div.addEventListener('mousemove', function(e){
let relX = e.pageX - divRect.left;
let relY = e.pageY - divRect.top;
this.textContent = `
relX: ${ relX }, absX: ${ e.pageX }
relY: ${ relY }, absY: ${ e.pageY }
`;
});
/* Перезапись координатов блока при изменении размеров окна */
window.addEventListener('resize', function(){
divRect = div.getBoundingClientRect();
});
.coor-demo {
width: 300px;
height: 150px;
background-color: orange;
margin: 25px;
padding: 5px;
user-select: none;
white-space: pre-line;
}
<div class="coor-demo"></div>
Если вам не нужно поддерживать совсем старые браузеры, то можно использовать свойства offsetX
и offsetY
события передвижения мыши.
Can I use
let div = document.querySelector('.coor-demo');
div.addEventListener('mousemove', function(e) {
this.textContent = `
relX: ${ e.offsetX }, absX: ${ e.pageX }
relY: ${ e.offsetY }, absY: ${ e.pageY }
`;
});
.coor-demo {
width: 300px;
height: 150px;
background-color: orange;
margin: 25px;
padding: 5px;
user-select: none;
white-space: pre-line;
}
<div class="coor-demo"></div>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Существует некая строка, предположим "RqaEzty", которую требуется вывести в таком формате: "R-Qq-Aaa-Eeee-Zzzzz-Tttttt-Yyyyyyy" Код ниже выводит в таком: "R-qq-aaa-eeee-zzzzz-tttttt-yyyyyyy"...
Подскажите пожалуйста, у меня есть массив объектов, допустим:
у меня клинт-серверное ПО клиент GUI, хочу его и защититьчтобы они не расковыряли-не поломали короче 2D игрушка