javascript - 听双击不是点击

Question

我只是想知道为什么当我dbclick 一个元素时会发生click 事件？

我有这个代码:( JSBIN )

HTML

<p id="hello">Hello World</p>

JavaScript

document.getElementById('hello').addEventListener('click', function(e){
  e.preventDefault();
  this.style.background = 'red';
}, false);
document.getElementById('hello').addEventListener('dbclick', function(){
  this.style.background = 'yellow';
}, false);

它应该为单击和双击做不同的事情，但似乎当你双击 p 时它会提前捕获 click 事件并忽略双击。

我也尝试了 preventDefault click 事件。我怎样才能只收听 dbclick？

更新

我的代码中有错字。 dbclick 是错误的。它是 dblclick。无论如何，问题仍然存在。当用户双击 click 事件时发生。

这是证明它的更新代码:( JSBin )

document.getElementById('hello').addEventListener('click', function(e){
  e.preventDefault();
  this.style.background = 'red';
  this.innerText = "Hello World clicked";
}, false);
document.getElementById('hello').addEventListener('dblclick', function(){
  this.style.background = 'green';
}, false); 

Answer 1

dblclick 并不神奇:虽然第二次快速 click 触发了 dblclick 事件，但第一个 click 有已经触发了自己的事件处理程序。

您几乎不应该在 DOM 元素上同时设置 click 和 dblclick 事件；当您这样做时，您将需要使用计时器的花哨技巧来缓解这个问题。

在这种特定情况下，您还需要更正拼写错误 (s/dbclick/dblclick/) 才能触发事件。

^{另请注意 dblclick is not actually part of the DOM specification at all (不存在于 DOM Level 2 1.6.2 中)。因此，它被称为“DOM Level 0”功能。}