Определение позиции курсора с помощью JavaScript

• 3059 просмотров

Определение позиции курсора с помощью JavaScript

Этот фрагмент кода дает нам полностью кросс-браузерное решение для вычисления положения x и y координат курсора пользователя относительно веб-страницы.

Функция определения координат

Определение X и Y координат мыши пользователя относительно документа может показаться сложным заданием. Каждый браузер имеет разные свойства, чтобы вычислить положение мыши. Данная функция для нахождения координат X и Y полностью кросс-браузерная и работает на чистом JavaScript. 

function getPosition(e) {
var posx = 0;
var posy = 0; if (!e) var e = window.event; if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
} return {
x: posx,
y: posy
}
}


Использование

Использовать нашу функцию довольно легкоК примеручтобы получить координаты клика пользователя нужно передать в обработчик событий нашу функцию – getPositionНа практике это выглядит примерно так:

document.addEventListener( "click", function(e) {
var x = getPosition(e).x; // Получаем координаты X
var y = getPosition(e).y; // Получаем координаты Y
console.log("x pos: "+ x +" // y pos:"+ y); // Выведем результат в консоль });


Это решение можно применять и к другим JavaScript событиям. Очень надеемся, что данный сниппет был полезен и если у вас возникнут вопросы – задавай их в комментарии.

Интересуют наши услуги?
Оставьте заявку!
Отправляя форму, Вы даете согласие на обработку персональных данных. Мы гарантируем что ваши данные никогда не будут переданы третьим лицам.
Отправляем...