• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • mousemove()

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

    .mousemove(handler(eventObject))
    • handler(eventObject)类型:Function()。每次事件触发时会执行的函数。
    .mousemove([eventData ], handler(eventObject))
    • eventData类型: PlainObject。一个对象,它包含的数据键值对映射将被传递给事件处理程序。
    • handler(eventObject)类型:Function()。每次事件触发时会执行的函数。
    .mousemove()
    • 这个方法不接受任何参数。

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

    当鼠标指针在元素内移动时,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 ";
      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(),我们可以手动触发这个事件:

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

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

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

    Move here
    Trigger the handler

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

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

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

    Additional Notes(其他注意事项):

    • .mousemove()方法只是作为.on("mousemove", handler)的一个速记写法,移除该事件可以使用.off("mousemove")

    例子

    当在黄色的 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="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
    

    Move the mouse over the div.

    上篇:mouseleave()

    下篇:mouseup()