Свойство pageY объекта Event

Определение и применение

Свойство pageY объекта Event определяет позицию курсора мыши относительно верхнего края документа, или элемента.

Чтобы определить позицию курсора мыши относительно левого края документа, или элемента Вы можете воспользоваться свойством pageX объекта Event.

jQuery синтаксис:

Синтаксис 1.04:
event.pageY

Пример использования

Рассмотрим следующий пример в котором с помощью метода .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 можно указать любой интересующий Вас элемент и узнать позицию курсора относительно этого элемента, а не всего документа).

Результат нашего примера:

Пример использования свойств pageX и pageY объекта Event. — Пример использования свойств pageX и pageY объекта Event

jQuery события