Определение позиции курсора с помощью 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 событиям. Очень надеемся, что данный сниппет был полезен и если у вас возникнут вопросы – задавай их в комментарии.