Свойство pageX объекта Event
jQuery событияОпределение и применение
Свойство pageX объекта Event определяет позицию курсора мыши относительно левого края документа, или элемента.
Чтобы определить позицию курсора мыши относительно верхнего края документа, или элемента Вы можете воспользоваться свойством pageY объекта Event.
jQuery синтаксис:
Синтаксис 1.04: event.pageX
Пример использования
Рассмотрим следующий пример в котором с помощью метода .mousemove() (событие срабатывает, когда указатель мыши перемещается внутри элемента) будем остлеживать координаты курсора относительно верхнего и левого края документа:
<!DOCTYPE html> <html> <head> <title>Использование свойств pageX и pageY объекта Event</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $( document ).ready(function(){ $( document ).mousemove(function( event ){ // задаем функцию при перемещении курсора мыши над документом $( "div:first" ).text( "event.pageX: " + event.pageX ); // добавляем в первый элемент <div> в документе позицию курсора мыши относительно левого края документа $( "div:last" ).text( "event.pageY: " + event.pageY ); // добавляем в последний элемент <div> в документе позицию курсора мыши относительно верхнего края документа }); }); </script> </head> <body> <div></div> <div></div> </body> </html>
В этом примере с использованием jQuery метода .mousemove() мы при перемещении курсора мыши над документом задаем функцию, которая в качестве параметра получает объект Event. С использованием метода .text() и свойств объекта Event (event.pageX и event.pageY) добавляем в первый и последний элемент <div> информацию о позиции курсора мыши относительно левого и верхнего края документа (вместо document можно указать любой интересующий Вас элемент и узнать позицию курсора относительно этого элемента, а не всего документа).
Результат нашего примера:
jQuery события