Javascript 听双击不是单击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7897558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Listen to double click not click
提问by Mohsen
I'm just wondering why clickevent happening when I dbclickan element?
我只是想知道为什么click当我dbclick是一个元素时会发生事件？
I have this code:(JSBIN)
我有这个代码:( JSBIN)
HTML
HTML
<p id="hello">Hello World</p>
JavaScript
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);
It should do different things for click and double click, but it seems when you double click on the pit catch clickevent in advance and ignore double click.
它应该为单击和双击做不同的事情，但是当您提前双击pit catchclick事件并忽略双击时，似乎是这样。
I tried preventDefaultthe clickevent too.
How can I listen to just dbclick?
我也试过preventDefault这个click活动。我怎么能只听dbclick？
UPDATE
更新
I had a typo in my code. dbclickis wrong. It's dblclick. Anyway the problem still exist. When user double clicks the clickevent happens.
我的代码中有一个错字。dbclick是错的。它是dblclick。无论如何问题仍然存在。当用户双击click事件发生。
This is updated code that prove it:(JSBin)
这是证明它的更新代码:( 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);
回答by Lightness Races in Orbit
dblclickis not magical: though the second rapid clickfires the dblclickevent, the first clickhas already triggered its own event handler.
dblclick并不神奇：虽然第二个快速click触发dblclick事件，但第一个click已经触发了自己的事件处理程序。
You should pretty much never set both a clickand a dblclickevent on a DOM element; when you do, you'll need fancy tricks with timers to mitigate the issue.
您几乎永远不应该在 DOM 元素上同时设置 aclick和dblclick事件；当您这样做时，您将需要使用计时器的花哨技巧来缓解该问题。
In this specific scenario, you'll also need to fix your typo (s/dbclick/dblclick/) to get the event to fire at all.
在这种特定情况下，您还需要修正拼写错误 ( s/dbclick/dblclick/) 以完全触发事件。
Also note that dblclickis not actually part of the DOM specification at all(not present in DOM Level 2 1.6.2). For this reason it's known as a "DOM Level 0" feature.
另请注意，dblclick它实际上根本不是 DOM 规范的一部分（在DOM Level 2 1.6.2 中不存在）。因此，它被称为“ DOM Level 0”功能。
回答by Josh
Change 'dbclick'to 'dblclick'.
更改'dbclick'为'dblclick'。
回答by michaeljdennis
Use dblclickinstead of dbclick.
使用dblclick代替dbclick。
回答by Cees Timmerman
This works for me (using the d3 library, but d could also be a dictionary object):
这对我有用（使用 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
}
回答by mckamey
To answer the revised question (How to mutually exclusively handle click and dblclick) you have to delay the click event until dblclick is no longer possible. This gives a slight lag (e.g., 500ms) to click handling but otherwise there is no way for the DOM to predict whether a second click will be arriving.
要回答修改后的问题（如何互斥地处理 click 和 dblclick），您必须延迟 click 事件，直到 dblclick 不再可能。这给点击处理带来了轻微的延迟（例如，500 毫秒），否则 DOM 无法预测第二次点击是否会到达。
An example script is in this answer: https://stackoverflow.com/a/11057483/43217
这个答案中有一个示例脚本：https: //stackoverflow.com/a/11057483/43217
回答by Hammad Khan
I would suspect you are working on slow computer. On a slow computer double click could be interpreted as two single click with significant time in between. You can experiment with mouse setting and change the double click setting. That should troubleshoot the problem. If you are computer isreally fast and has no lag issue, your problem could be somewhere else. It is very unlikely that double click could be taken as single click as code bug (the one you posted). Problem could be elsewhere if not slowness of the computer.
我怀疑您正在使用慢速计算机。在较慢的计算机上，双击可以解释为两次单击之间有很长的时间。您可以尝试鼠标设置并更改双击设置。那应该可以解决问题。如果你的电脑是非常快，没有滞后的问题，您的问题可能是别的地方。双击作为代码错误（您发布的那个）被视为单击是不太可能的。如果不是计算机速度慢，问题可能出在其他地方。
