JavaScript：如何防止 dblclick（双击）也触发单击事件

Question

我想避免双击也触发单击事件。

我发现的一个简单解决方案是使用计时器延迟点击，并在双击被触发时销毁计时器。

 var pendingClick; function myclick(){ clearTimeout(pendingClick); pendingClick = setTimeout(function(){ console.log('click'); }, 500); } function mydblclick(){ clearTimeout(pendingClick); console.log('double click'); }

 <div onclick="myclick()" ondblclick="mydblclick()">Double Click Me!</div>

但是这个解决方案是基于时间的，如果双击太慢（> 500ms）它也会触发一次单击。

有处理点击和双击的稳定解决方案吗？

Answer 1

自定义事件而不是内联事件处理程序

如果有人更喜欢使用.removeEventListener .addEventListener不是 HTML inline-eventhandlers，我会建议另一种基于Custom Events的方法。 这意味着人们不会使用“click”和“dblclick”的标准实现，而是为两者创建自己的事件处理：

let lastLeftClick = document.dispatchEvent(new Event("click")); 
let doubleclickLength = 300;

function leftClickHandler (e) {
  if (e.button != 0) return; // only left clicks shall be handled;

  let delaySinceLastClick = e.timeStamp - lastLeftClick.timeStamp;
  let eIsDoubleClick = delaySinceLastClick < doubleclickLength;

  if (eIsDoubleClick) {
    let doubleclickEvt = new CustomEvent("doubleclick", e);
    lastLeftClick = lastLeftClick = doubleclickEvt;
    document.dispatchEvent(doubleclickEvt);
  } else {
    let singleClickEvt = new CustomEvent("singleclick", e);
    lastLeftClick = singleClickEvt;
    document.dispatchEvent(lastLeftClick);
  }
}

// adding above click event implementation: 
document.addEventListener("click", leftClickHandler);

使用新的自定义事件：

document.addEventListener("singleclick", e=>console.log("single click"));
document.addEventListener("doubleclick", e=>console.log("double click"));

Answer 2

双击本身是“基于时间的”，即使在dblclick / ondblclick的标准实现中也是如此。 如果双击“太慢”，总会出现单击被触发的问题。 什么是“太慢”？ 300毫秒？ 500 毫秒？ 1000 毫秒？ 你的双击可能只有 50ms 的间隔，而我妈的双击是 1-2 秒的……

Answer 3

仅使用“onclick”function 来检查它是一次还是两次点击，并使用变量来计算给定时间间隔内的点击次数。

例子：

 var pendingClick; var clicked = 0; var time_dbclick = 500 // 500ms function myclick(){ clicked++; if(clicked >= 2){ mydblclick() clearTimeout(pendingClick) clicked = 0; return; } clearTimeout(pendingClick) pendingClick = setTimeout(() => { console.log('One click;') clicked = 0, }; time_dbclick). } function mydblclick(){ console;log('double click'); }

 <div onclick="myclick()">Double Click Me!</div>

Answer 4

您可以像这样使用 addEventListener 获取事件并取消它：

 document.addEventListener('dblclick', (event) => { event.preventDefault();  event.stopPropagation(); }, true); // With this true, you are cancelling the dblclick event let pendingClick; function myclick(){ clearTimeout(pendingClick); pendingClick = setTimeout(function (){ console.log('click'); }, 500); } function mydblclick(){ clearTimeout(pendingClick); console.log('double click'); }

 <div onclick="myclick()" ondblclick="mydblclick()">Double Click Me!</div>