听双击不点击

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？

UPDATE

我的代码中有一个拼写错误.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元素上设置a click和dblclick事件; 当你这样做时,你需要花哨的技巧与计时器来缓解这个问题.

在这个特定的场景中,你还需要修复你的拼写错误(s/dbclick/dblclick/)以使事件发生.

^{另请注意,dblclick它实际上并不是DOM规范的一部分(DOM Level 2 1.6.2中不存在).因此,它被称为" DOM Level 0 "功能.}

Answer 2

更改'dbclick'到'dblclick'.

Answer 3

使用dblclick而不是dbclick.