當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery .mousemove()用法及代碼示例


用法 
.mousemove( handler ) => jQuery

說明：將事件處理程序綁定到 "mousemove" JavaScript 事件，或在元素上觸發該事件。

  • 添加的版本：1.0.mousemove( handler )

    • handler
      類型：Function(Event eventObject)
      每次觸發事件時執行的函數。

  • 添加的版本：1.4.3.mousemove( [eventData ], handler )

    • eventData
      類型：Anything
      包含將傳遞給事件處理程序的數據的對象。
    • handler
      類型：Function(Event eventObject)
      每次觸發事件時執行的函數。

  • 添加的版本：1.0.mousemove()

    • 此簽名不接受任何參數。

此方法是前兩個變體中.on( "mousemove", handler ) 和第三個變體中.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">：

.mousemove() 的處理程序在 (399, 48) 調用
.mousemove() 的處理程序在 (398, 46) 調用
.mousemove() 的處理程序在 (397, 44) 調用
.mousemove() 的處理程序在 (396, 42) 調用

要手動觸發事件，請應用不帶參數的.mousemove()：

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

執行此代碼後，單擊 Trigger 按鈕也會附加消息：

.mousemove() 的處理程序調用於(未定義，未定義)

在跟蹤鼠標移動時，通常需要知道鼠標指針的實際位置。傳遞給處理程序的事件對象包含有關鼠標坐標的一些信息。 .clientX 、 .offsetX 和 .pageX 等屬性可用，但對它們的支持因瀏覽器而異。幸運的是，jQuery 標準化了 .pageX 和 .pageY 屬性，以便它們可以在所有瀏覽器中使用。這些屬性提供鼠標指針相對於文檔左上角的 X 和 Y 坐標，如上麵的示例輸出所示。

請記住，隻要鼠標指針移動，即使是像素移動，都會觸發 mousemove 事件。這意味著可以在非常短的時間內生成數百個事件。如果處理程序必須進行任何重要的處理，或者存在多個事件處理程序，這可能會嚴重消耗瀏覽器的性能。因此，重要的是盡可能優化mousemove 處理程序，並在不再需要它們時立即解除綁定。

一種常見的模式是從 mousedown 處理程序中綁定 mousemove 處理程序，並從相應的 mouseup 處理程序中解除綁定。如果實現此事件序列，請記住 mouseup 事件可能會發送到與 mousemove 事件不同的 HTML 元素。考慮到這一點，mouseup 處理程序通常應該綁定到 DOM 樹中較高的元素，例如 <body> 。

其他注意事項：

  • 由於 .mousemove() 方法隻是 .on( "mousemove", handler ) 的簡寫，因此可以使用 .off( "mousemove" ) 進行分離。

例子：

當鼠標移到黃色 div 上時顯示鼠標坐標。坐標是相對於窗口的，在這種情況下是 iframe。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mousemove demo</title>
  <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-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( event ) {
  var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
  var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
  $( "span" ).first().text( "( event.pageX, event.pageY ) : " + pageCoords );
  $( "span" ).last().text( "( event.clientX, event.clientY ) : " + clientCoords );
});
</script>
 
</body>
</html>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .mousemove()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。