Метод получения текущего положения мыши с использованием JavaScript

Иногда нам нужно получить расстояние перемещения окна или курсора мыши. В этом случае можно вычислить положение курсора мыши до и после события, чтобы получить желаемый результат. Ниже приведены несколько свойств событий:

1. Позиция координат клиентской области

　　События мыши происходят в определенном месте браузерного окна. Информация о положении сохраняется в свойствах объекта события clientX и clientY. Значения этих свойств показывают горизонтальные и вертикальные координаты курсора мыши в окне браузера в момент события (без учета расстояния прокрутки страницы). См. рисунок ниже:

var div = document.getElementById("myDiv"); // Получение элемента
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("Координаты экрана: " + event.screenX + "," + event.screenY);
});

Примечание: В данном случае, EventUtil.on() означает привязку события к элементу, EventUtil.getEvent(event) означает получение объекта события. EventUtil - это пользовательский объект событий ( 实现 на JavaScript ), который содержит некоторые методы для работы с браузерами, подробности см. в другой статье «Некоторые методы событий для кросс-браузерной работы». Если проект использует плагин jQuery, можно заменить соответствующим методом.

2. Позиция координат страницы

　　Свойства объекта события pageX и pageY могут告诉 вам, в каком месте страницы произошло событие. Иными словами, эти свойства показывают положение курсора мыши на странице (эквивалент координат мыши в окне + расстояние прокрутки страницы).

var div = document.getElementById("myDiv"); // Получение элемента по идентификатору
EventUtil.on(div, "click", function(event){ // Привязка события click к элементу
 event = EventUtil.getEvent(event); // Получение объекта события
 var pageX = event.pageX, pageY = event.pageY;
 if (pageX === undefined){//IE8 и более ранние версии
  pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
 }
 if (pageY === undefined){
  pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
 }
 alert("Координаты страницы: " + pageX + "," + pageY);
});

3. Позиция координат экрана

　　С помощью свойств screenX и screenY можно определить координаты курсора мыши относительно всего экрана в момент возникновения события мыши.如下图所示:

var div = document.getElementById("myDiv");
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("Координаты экрана: " + event.screenX + "," + event.screenY);
});

Статья основана на книге «JavaScript Advanced Programming Design, Third Edition»

Спасибо за чтение, надеюсь, это поможет вам, спасибо за поддержку нашего сайта!