javascript - 如何在元素上同时使用 onclick 和 ondblclick？

Question

我的页面上有一个元素，我需要将 onclick 和 ondblclick 事件处理程序附加到该元素。当单击发生时，它应该执行与双击不同的操作。当我第一次开始尝试完成这项工作时，我的头开始旋转。显然，onclick 总是会在你双击时触发。所以我尝试使用这样的基于超时的结构......

window.onload = function() {
  var timer;
  var el = document.getElementById('testButton');

  el.onclick = function() {
    timer = setTimeout(function() { alert('Single'); }, 150);        
  }

  el.ondblclick = function() {
    clearTimeout(timer);
    alert('Double');
  }
}

但我得到了不一致的结果(使用 IE8)。它可以正常工作很多次，但有时我会收到两次“单次”警报。

以前有人做过吗？有没有更有效的方法？

Answer 1

和马特一样，当我稍微增加超时值时，我的体验要好得多。此外，为了减轻单击触发两次的问题(无论如何我都无法使用更高的计时器重现)，我在单击处理程序中添加了一行:

el.onclick = function() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(function() { alert('Single'); }, 250);        
}

这样，如果 click 已经设置为触发，它将自行清除以避免重复的“Single”警报。