返回值:jQuerymousemove(handler(eventObject))

为 JavaScript 的 "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>

可以将事件绑定到 id 为 target 的元素上：

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

现在，当我们在 target 元素内移动鼠标时，就会向 <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)

我们可以调用不带参数的 .mousemove() 方法，手动触发这个事件： 

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

在执行完上述代码之后，点击 Trigger 按钮同样会追加如下信息：

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

当追踪鼠标移动时，通常需要知道鼠标指针的实际位置。传递给该事件的 event 对象含有一些鼠标坐标信息。例如 .clientX, .offsetX, 和 .pageX 这些属性都是可以被使用的。不过，不同的浏览器对它们的支持情况不一样。幸运的时，jQuery 将 .pageX 和 .pageY 属性进行了标准化，以便于在所有的浏览器中都可以使用它们。这些属性提供了相对于文档左上角的鼠标指针的 X 和 Y 轴坐标。即，上例中输出显示的坐标值。

牢记，只要移动了鼠标指针，哪怕是只移动了一个像素，都会触发 mousemove 事件。这意味着，在很短的时间内，该事件会产生很多次。如果在该事件中，存在任何重大的处理或多个处理程序，都将会产生严重的性能问题，甚至会让浏览器失去响应。因此，重要的是要尽可能的优化 mousemove 事件，并且当不再需要该事件时，要及时将它解除绑定。

通常是在 mousedown 中绑定 mousemove 事件。并且在对应的 mouseup 事件中，解除绑定。要实现这一系列事件，请记住，与 mousemove 事件相比，mouseup 事件可能会被发送到不同的 HTML 元素上。由于这个原因，mouseup 事件通常应该绑定在更高的 DOM 树中，例如 <body>。

示例:

当在黄色的 div 移动鼠标时，显示鼠标指针的坐标。坐标是相对于窗口的，在该例中，窗口指的是 iframe。

<!DOCTYPE html>
<html>
<head>
<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="jquery.min.js"></script>
</head>
<body>

<p>
    <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>

演示: