mousemove 事件

類別：事件>滑鼠事件
將事件處理常式繫結到「mousemove」事件，或在元素上觸發該事件。

內容

.on( "mousemove" [, eventData ], handler )傳回：jQuery

說明：將事件處理常式繫結到「mousemove」事件。

此頁面說明 mousemove 事件。對於已棄用的 .mousemove() 方法，請參閱 .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" ).on( "mousemove", function( event ) {
  var msg = "Handler for `mousemove` called at ";
  msg += event.pageX + ", " + event.pageY;
  $( "#log" ).append( "<div>" + msg + "</div>" );
} );

現在當滑鼠指標在目標按鈕內移動時，訊息會附加上 <div id="log">

在 (399, 48) 呼叫 `mousemove` 的處理常式
在 (398, 46) 呼叫 `mousemove` 的處理常式
在 (397, 44) 呼叫 `mousemove` 的處理常式
在 (396, 42) 呼叫 `mousemove` 的處理常式

若要手動觸發事件，請使用 .trigger( "mousemove" )

1
2
3
 
$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "mousemove" );
} );

此程式碼執行後，按一下觸發按鈕也會附加上訊息

在 (undefined, undefined) 呼叫 `mousemove` 的處理常式

在追蹤滑鼠移動時，你通常需要知道滑鼠指標的實際位置。傳遞給處理常式的事件物件包含一些關於滑鼠座標的資訊。例如 .clientX、.offsetX 和 .pageX 等屬性，但瀏覽器對它們的支持不同。幸運的是，jQuery 標準化了 .pageX 和 .pageY 屬性，以便可以在所有瀏覽器中使用。這些屬性提供滑鼠指標相對於文件左上角的 X 和 Y 座標，如上方的範例輸出所示。

請記住，mousemove 事件會在滑鼠指標移動時觸發，即使只移動一個像素。這表示在極短的時間內可能會產生數百個事件。如果處理常式必須進行任何重要的處理，或存在多個事件處理常式，這可能會嚴重耗損瀏覽器的效能。因此，盡可能最佳化 mousemove 處理常式，並在不再需要時解除繫結非常重要。

常見的模式是從 mousedown 處理常式內繫結 mousemove 處理常式，並從對應的 mouseup 處理常式解除繫結。如果實作這段事件順序，請記住 mouseup 事件可能會傳送到與 mousemove 事件不同的 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on 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.7.0.js"></script>
</head>
<body>
 
<p>
  <span>Move the mouse over the div.</span>
  <span>&nbsp;</span>
</p>
<div></div>
 
<script>
$( "div" ).on( "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>

示範