听双击而不是点击

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

我怀疑您正在使用速度较慢的计算机。在速度较慢的计算机上，双击可能会被解释为两次单击，中间间隔很长的时间。您可以尝试鼠标设置并更改双击设置。这应该可以解决问题。如果您的计算机速度非常快并且没有延迟问题，那么您的问题可能出在其他地方。双击不太可能被视为代码错误（您发布的那个）的单击。如果不是计算机速度慢的话，问题可能出在其他地方。

Answer 2

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

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

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

^{另请注意，dblclick 实际上根本不是 DOM 规范的一部分 （不存在于 DOM Level 2 1.6.2）。因此，它被称为“DOM Level 0< /a>”功能。}

Answer 3

将 'dbclick' 更改为 'dblclick'。

Answer 4

使用dblclick 而不是dbclick。

Answer 5

要回答修改后的问题（如何相互排斥地处理 click 和 dblclick），您必须延迟 click 事件，直到不再可能执行 dblclick。这给点击处理带来了轻微的延迟（例如，500 毫秒），但 DOM 无法预测第二次点击是否会到达。

此答案中有一个示例脚本：https://stackoverflow.com/a/11057483/43217

Answer 6

这对我有用（使用 d3 库，但 d 也可以是字典对象）：

function log(s){try{console.log(s)}catch(e){}} // for debugging

var click_d = null

function click(d){
    log("click")
    click_d = d
    setTimeout(click_action, 200)
}

function click_action(){
    log("click_action")
    if(click_d == null){
        log("aborted")
        return
    }
    d = click_d

    // do things with d
}

function doubleclick(d){
    log("dblclick")
    click_d = null

    // do things with d
}