我想知道为什么当我双击一个元素时,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
事件并忽略双击。
我尝试了阻止 click
事件,但它似乎仍然无法监听到只有 dblclick
的事件。如何只监听 dblclick
?
更新
我的代码中有个错字,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);
dblclick
。 - Lightness Races in Orbitdblclick
”的问题。 - Lightness Races in OrbitstopPropagation
会对这里有帮助吗? - Mohsenclick
事件中做任何事情都不能改变后续是否会发生dblclick
事件的结果,除非调用一个神奇的时间旅行函数。我的答案已经很全面了,抱歉。 - Lightness Races in Orbit