dblclick 事件

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

內容

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

說明：繫結事件處理常式至「dblclick」事件。

此頁面說明 dblclick 事件。有關已棄用的 .dblclick() 方法，請參閱 .dblclick()。

當元素被雙擊時，dblclick 事件會傳送至該元素。任何 HTML 元素都可以接收此事件。例如，考慮 HTML

1
2
3
4
5
6
 
<div id="target">
  Double-click here
</div>
<div id="other">
  Trigger the handler
</div>
圖 1 - 呈現的 HTML 說明

事件處理常式可以繫結至任何 <div>

1
2
3
 
$( "#target" ).on( "dblclick", function() {
  alert( "Handler for `dblclick` called." );
} );

現在在這個元素上雙擊會顯示警示

已呼叫 `dblclick` 處理常式。

若要手動觸發事件，請呼叫 .trigger( "dblclick" )

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

此程式碼執行後，在 觸發處理常式 上（單次）按一下也會顯示警示訊息。

dblclick 事件僅在以下事件序列發生後才會觸發

  • 指標在元素內時，滑鼠按鈕會按住。
  • 指標在元素內時，滑鼠按鈕會放開。
  • 指標在元素內時，滑鼠按鈕會再次按住，時間視系統而定。
  • 指標在元素內時，滑鼠按鈕會放開。

不建議為同一個元素繫結 click 和 dblclick 事件的處理常式。觸發的事件順序會因瀏覽器而異，有些會在 dblclick 之前收到兩個 click 事件，而有些只會收到一個。雙擊靈敏度（偵測為雙擊的按一下之間的最大時間）會因作業系統和瀏覽器而異，而且通常可以由使用者設定。

範例

若要將「Hello World!」警示方塊繫結至頁面上每個段落的 dblclick 事件

1
2
3
 
$( "p" ).on( "dblclick", function() {
  alert( "Hello World!" );
} );

雙擊以切換背景顏色。

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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on demo</title>
  <style>
  div {
    background: blue;
    color: white;
    height: 100px;
    width: 150px;
 }
  div.dbl {
    background: yellow;
    color: black;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div></div>
<span>Double click the block</span>
 
<script>
var divdbl = $( "div" ).first();
divdbl.on( "dblclick", function() {
  divdbl.toggleClass( "dbl" );
} );
</script>
 
</body>
</html>

示範