Содержание:
.on( "mousemove" [, eventData ], handler )Возвращает: jQuery
Описание: Привязывает обработчик событий к событию "mousemove".
-
версия добавлена: 1.7.on( "mousemove" [, eventData ], handler )
Эта страница описывает событие mousemove. Для устаревшего метода .mousemove(), см. .mousemove().
Событие mousemove отправляется элементу, когда указатель мыши перемещается внутри элемента. Любой HTML-элемент может получить это событие.
Например, рассмотрим HTML:
<div id="target"> Move here </div> <div id="other"> Trigger the handler </div> <div id="log"></div>
Обработчик событий можно привязать к целевому элементу:
$( "#target" ).on( "mousemove", function( event ) {
var msg = "Handler for `mousemove` called at ";
msg += event.pageX + ", " + event.pageY;
$( "#log" ).append( "<div>" + msg + "</div>" );
} ); Теперь, когда указатель мыши перемещается внутри целевой кнопки, сообщения добавляются в <div id="log">:
Обработчик для `mousemove` вызван в точке (399, 48)
Обработчик для `mousemove` вызван в точке (398, 46)
Обработчик для `mousemove` вызван в точке (397, 44)
Обработчик для `mousemove` вызван в точке (396, 42)
Чтобы вызвать событие вручную, используйте .trigger( "mousemove" ):
$( "#other" ).on( "click", function() {
$( "#target" ).trigger( "mousemove" );
} ); После выполнения этого кода щелчки по кнопке "Вызвать" также добавят сообщение:
Обработчик для `mousemove` вызван в точке (undefined, undefined)
При отслеживании перемещения мыши обычно необходимо знать фактическое положение указателя мыши. Объект события, который передается обработчику, содержит некоторую информацию о координатах мыши. Доступны такие свойства, как .clientX, .offsetX, и .pageX, но поддержка их зависит от браузера. К счастью, jQuery нормализует свойства .pageX и .pageY, что позволяет использовать их во всех браузерах. Эти свойства предоставляют координаты X и Y указателя мыши относительно левого верхнего угла документа, как показано в примере выше.
Помните, что событие mousemove генерируется каждый раз, когда указатель мыши перемещается, даже на один пиксель. Это означает, что сотни событий могут генерироваться за очень короткий промежуток времени. Если обработчик должен выполнить значительную обработку или если существует несколько обработчиков для события, это может серьезно повлиять на производительность браузера. Поэтому важно максимально оптимизировать обработчики mousemove и отключать их, как только они больше не нужны.
Распространённый шаблон - привязывать обработчик mousemove внутри обработчика mousedown и отключать его соответствующим обработчиком mouseup. Если вы реализуете эту последовательность событий, помните, что событие mouseup может быть отправлено в другой HTML-элемент, чем событие mousemove. Чтобы учесть это, обработчик mouseup обычно должен быть привязан к элементу в верхней части дерева DOM, например, <body>.
Пример:
Отобразить координаты мыши при перемещении над жёлтым div. Координаты относительны к окну, которое в данном случае является iframe.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
div {
width: 220px;
height: 170px;
margin: 10px 50px 10px 10px;
background: yellow;
border: 2px groove;
float: right;
}
p {
margin: 0;
margin-left: 10px;
color: red;
width: 220px;
height: 120px;
padding-top: 70px;
float: left;
font-size: 14px;
}
span {
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div></div>
<script>
$( "div" ).on( "mousemove", function( event ) {
var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
$( "span" ).first().text( "( event.pageX, event.pageY ) : " + pageCoords );
$( "span" ).last().text( "( event.clientX, event.clientY ) : " + clientCoords );
} );
</script>
</body>
</html> Демо:
.trigger( "mousemove" )Возвращает: jQuery
Описание: Вызвать событие "mousemove" на элементе.
-
версия добавлена: 1.0.trigger( "mousemove" )
- "mousemove"Тип: строкаСтрока
"mousemove".
-
См. описание для .on( "mousemove", ... ).
