mousemove()

Этот метод является сокращением для .bind('mousemove', handler) в первом варианте, и .trigger('mousemove') во втором.

Событие mousemove передается элементу, когда указатель мышки передвигается внутри элемента. Любой элемент HTML может получать это событие.

Для примера, рассмотрим HTML:

<div id="target">
  Move here
</div>
<div id="other">
  Trigger the handler

</div>
<div id="log"></div>

Результат выполнения кода выше:

Move here

Trigger the handler

Обработчик события может быть связан с целью:

$('#target').mousemove(function(event) {
  var msg = 'Handler for .mousemove() called at ' + event.pageX + ', ' + event.pageY;
  $('#log').append('<div> + msg + '</div>');
});

Теперь, когда указатель мышки передвигается внутри цели, сообщения будут приложенны к <div id="log">:

Handler for .mousemove() called at (399, 48)
Handler for .mousemove() called at (398, 46)
Handler for .mousemove() called at (397, 44)
Handler for .mousemove() called at (396, 42)

Мы также можем запустить событие, когда второй объект нажат:

$('#other').click(function() {
  $('#target').mousemove();
});

После выполнения этого кода, нажатие на поле запуска также выдаст сообщение:

Handler for .mousemove() called at (undefined, undefined)

При отслеживании перемещения мышки, обычно мы должны знать реальное положение указателя мыши. Объект события, который передается в обработчик содержит информацию о координатах мышки. Свойства, такие как .clientX, .offsetX, и .pageX доступны, но их поддержка отличается в различных браузерах. К счастью, jQuery нормализует атрибуты .pageX и .pageY, так, что они могут быть использованы во всех браузерах. Эти атрибуты предоставляют координаты X и Y курсора относительно верхнего левого угла страницы, как показано в примере выше результатов.

Мы должны помнить, что событие mousemove запускается, всякий раз, когда перемещается курсор мыши, даже на пиксель. Это означает, что сотни событий могут быть сгенерированы в очень небольшое количество времени. Если обработчик сколь-нибудь значимого процесса, или, если несколько обработчиков существуют для события, это может быть серьезной проблемой производительности для браузера. Важно, таким образом, оптимизировать обработчики mousemove как только возможно, и развязывать их, как только они больше не нужны.

Общий принцип заключается в связывании обработчика mousemove изнутри обработчика mousedown, и развязывать его от соответствующего обработчика mouseup. При осуществление этой последовательности событий, помните, что событие mouseup может быть посланно другому элементу HTML, чем тому, которому посланно mousemove. Для учета этого, обработчик mouseup должен обычно быть связан с элементом высоко в дереве DOM, таким, как .

Примеры

Отображает координаты, когда указатель мыши двигается над элементом div с желтым фоном. Координаты, в данном случае, показываются относительно фрейма.

$("div").mousemove(function(e){
   var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
   var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
   $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
   $("span:last").text("(e.clientX,e.clientY )-"+clientCoords);
});

Результат выполнения кода выше:

Попробуйте сами

Пример - Полный код:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
    
$("div").mousemove(function(e){
   var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
   var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
   $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
   $("span:last").text("(e.clientX,e.clientY)-"+clientCoords);
});

  });
  </script>
  <style>

  div { width:250px; height:170px; margin;10px; margin-right:50px;
        background:yellow; border:2px groove; float:right; }
  p { margin:0; margin-left:10px; color:red; width:250px;
      height:120px; padding-top:70px;
      float:left; font-size:14px; }
  span { display:block; }
  </style>

</head>
<body>
  <p>   
    Try scrolling too.
    <span>Move the mouse over the div.</span>

    <span> </span>
  </p>

  <div></div>
</body>
</html>

Попробуйте сами

Была ли эта информация полезной?

Да Нет

.mousemove( handler(объектСобытия) )

.mousemove( handler(объектСобытия) )

.mousemove( )

.mousemove( [ данныеСобытия ], обработчик(объектСобытия)

Примеры

Пример - Полный код:

Комментарии