Element: dblclick event

在此页

范例
规范
浏览器兼容性
另请参阅
相关话题

dblclick event fires when a pointing device button (such as a mouse's primary button) is double-clicked; that is, when it's rapidly clicked twice on a single element within a very short span of time.

dblclick fires after two click events (and by extension, after two pairs of mousedown and mouseup 事件)。

冒泡	Yes
可取消	Yes
接口	`MouseEvent`
事件处理程序特性	`ondblclick`

范例

This example toggles the size of a card when you double click on it.

JavaScript

const card = document.querySelector('aside');
card.addEventListener('dblclick', function (e) {
  card.classList.toggle('large');
});

HTML

<aside>
  <h3>My Card</h3>
  <p>Double click to resize this object.</p>
</aside>

CSS

aside {
  background: #fe9;
  border-radius: 1em;
  display: inline-block;
  padding: 1em;
  transform: scale(.9);
  transform-origin: 0 0;
  transition: transform .6s;
}
.large {
  transform: scale(1.3);
}

结果

规范

规范	状态
UI Events The definition of 'dblclick' in that specification.	工作草案
DOM (文档对象模型) 3 级事件规范 The definition of 'dblclick' in that specification.	过时

浏览器兼容性

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`dblclick` event	Chrome 1	Edge 12	Firefox 6 6 Starting in Firefox 68, `dblclick` events are only sent for the primary mouse button, per the specification.	IE 11	Opera 11.6	Safari 3	WebView Android No	Chrome Android No	Firefox Android 6	Opera Android 12.1	Safari iOS 1	Samsung Internet Android No

在此页

范例

JavaScript

HTML

CSS

结果

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题