.mousemove()

.mousemove( handler(eventObject) ) 官网原E文: jQuery

描述: 为 "mousemove" 事件绑定一个处理函数,或者触发元素上的 "mousemove" 事件。

  • version added: 1.0.mousemove( handler(eventObject) )

    handler(eventObject)每次事件触发时会执行的函数。

  • version added: 1.4.3.mousemove( [ eventData ], handler(eventObject) )

    eventData将要传递给事件处理函数的数据映射。

    handler(eventObject)每次事件触发时会执行的函数。

  • version added: 1.0.mousemove()

这个函数的第一种用法是 .bind('mouseleave', handler) 的快捷方式,第二种用法是 .trigger('mouseleave') 的快捷方式。

当鼠标指针在元素内移动时,mousemove事件就会被发送到这个元素,任何HTML元素都可以接受此事件。

举例来说,请看下面的HTML:

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

这个事件可以绑定到目标元素:

$('#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();
});

这些代码执行后,点击Trigger the handler同样添加这些信息:

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

当足迹鼠标移动,我们通常需要知道实际的鼠标指针的位置。事件对象传递给处理器包含了一些有关鼠标的坐标。比如.clientX, .offsetX, 和 .pageX属性是有效的,但对他们的支持不同浏览器。幸运的是,jQuery的规范了.pageX.pageY属性,以便他们能够在所有浏览器上使用。这些属性提供了鼠标指针位置相对于页面的左上角的X和Y坐标,例如上面例子的输出。

我们必须记住, mousemove事件是当鼠标指针移动时触发的,即使是一个像素。这意味着数百个事件在短时间内产生。如果处理器做任何重大的处理,或者如果该事件存在多个处理函数,这可能造成浏览器的严重的性能问题。因此,优化mousemove处理程序尽可能,这一点很重要,和当他们不再需要时尽快解除绑定。

一个常见的模式是在mousedown处理器内部绑定mousemove处理器,并在一个相应mouseup处理器取消绑定它。如果实施这一系列事件,记得mouseup事件可能会被发送到不同的HTML元素比mousemove事件。考虑到这一点,在mouseup处理程序通常应绑定到一个在DOM树层级高的元素上,比如<body>

Example:

Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window, which in this case is the iframe.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:220px; height:170px; margin;10px; margin-right:50px;
        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="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <p>   
    Try scrolling too.
    <span>Move the mouse over the div.</span>
    <span>&nbsp;</span>
  </p>

  <div></div>
<script>
    $("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>

</body>
</html>

Demo:

jQuery 1.6 API 中文版Clove整理、修订