# .mousemove()

所属分类：事件 > 鼠标事件 英文文档：.mousemove()

## .mousemove( handler(eventObject) )返回: jQuery

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

- #### 添加的版本: 1.0.mousemove( handler(eventObject) )

  - handler(eventObject)
    类型: Function()
    每次事件触发时会执行的函数。

- #### 添加的版本: 1.4.3.mousemove( [eventData ], handler(eventObject) )

  - eventData
    类型: PlainObject
    一个对象，它包含的数据键值对映射将被传递给事件处理程序。
  - handler(eventObject)
    类型: Function()
    每次事件触发时会执行的函数。

- #### 添加的版本: 1.0.mousemove()

  - 这个方法不接受任何参数。

这个方法的前两个用法是 `.bind('mousemove', handler)` 的快捷方式，第3个不带参数的用法是 `.trigger('mousemove')` 的快捷方式。

当鼠标指针在元素内移动时，`mousemove`事件就会被触发，任何HTML元素都可以接受此事件。

举例来说，请看下面的HTML：

1 2 3 4 5 6 7 |
    <div id="target">  Move here</div><div id="other">  Trigger the handler</div><div id="log"></div>

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

1 2 3 4 5 |
    $("#target").mousemove(function(event) {  var msg = "Handler for .mousemove() called at ";  msg += 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)

使用不带参数的`.mousemove()`，我们可以手动触发这个事件:

1 2 3 |
    $("#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`处理函数解除绑定。要实现这一系列事件，请记住，与 `mouseup` 事件相比，`mouseup` 事件可能会被发送到不同的 HTML 元素上。由于这个原因，`mouseup` 事件通常应该绑定在更高的 DOM 树中，例如 `<body>`。

## 例子:

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
    <!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="https://code.jquery.com/jquery-latest.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>

#### Demo: