更新

Question

我只是想知道为什么click事件在我dbclick元素时发生？

我有这段代码：（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”功能。}

Answer 2

将'dbclick'更改为'dblclick'。

Answer 3

使用dblclick代替dbclick。

Answer 4

这对我有用（使用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
}

Answer 5

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

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

Answer 6

我怀疑你正在使用慢速计算机。在慢速计算机上，双击可以解释为两次单击，中间有大量时间。您可以尝试鼠标设置并更改双击设置。这应该解决问题。如果您是计算机非常快且没有滞后问题，那么您的问题可能就在其他地方。单击双击作为代码错误（你发布的那个）是不太可能的。如果不是计算机的缓慢，问题可能在其他地方。

听双击不点击

更新

6 个答案: