当dblclick事件触发时,防止点击事件被触发

Question

我正在处理DOM元素上的click和dblclick事件.每个执行一个不同的命令,但我发现双击该元素时,除了触发双击事件外,click事件也会被触发两次.防止这种行为的最佳方法是什么？

Answer 1

如果其他人偶然发现(正如我所做)寻找答案,我能想出的绝对最佳解决方案如下:

    $node.on('click',function(e){
      if(e.originalEvent.detail > 1){
         return;
        /* if you are returning a value from this
         function then return false or cancel 
         the event some other way */
      }
    });

完成.如果背靠背有多个点击,第二个,第三个等等.不会开枪.我绝对更喜欢使用任何类型的计时器.

通过阅读本文,我让自己指向了这个方向.

顺便说一句:我第一次研究这个问题是因为我不小心双击了一个分页链接,并且在回调发生之前事件被触发并完成了两次.

在提出上面的代码之前,我有

 if e.originalEvent.detail === 2 //return

但是,我能够点击链接3次(三次点击),虽然第二次点击没有触发,但第三次点击

Answer 2

在评论中,你说,

我将点击处理程序延迟了300毫秒(一个明显而烦人的延迟)甚至......

所以听起来你想要的是当你点击时,DOM应该立即生成一个点击事件,除非点击是第一次点击双击.

要实现此功能,当您单击时,DOM需要能够预测这是否是最终点击或是否是双击的第一次(但是我认为通常不可能让DOM预测用户是否即将再次点击).

您尝试单击和双击时要执行的两个不同操作是什么？IMO,在普通应用程序中,您可能需要两个事件:例如,单击以关注元素,然后双击以激活它.

当您必须分离事件时,某些应用程序会使用双击之外的其他内容:例如,它们使用右键单击或按住Control键单击.

Answer 3

在这种情况下,最好稍微延迟单击事件的执行.让双击处理程序设置单击事件将检查的变量.如果该变量具有特定值,则可以是boolDoubleClick == true,然后不要fire/handle单击.

Answer 4

感谢这里的所有其他答案，因为当交互需要两者但互斥时，它们的组合似乎为我提供了合理的解决方案：

var pendingClick = 0;

function xorClick(e) {
    // kill any pending single clicks
    if (pendingClick) {
        clearTimeout(pendingClick);
        pendingClick = 0;
    }

    switch (e.detail) {
        case 1:
            pendingClick = setTimeout(function() {
                console.log('single click action here');
            }, 500);// should match OS multi-click speed
            break;
        case 2:
            console.log('double click action here');
            break;
        default:
            console.log('higher multi-click actions can be added as needed');
            break;
    }
}

myElem.addEventListener('click', xorClick, false);

更新：我添加了此方法的通用版本以及用于触摸设备的点击填充到此 Github 存储库中，并附有示例：

https://github.com/mckamey/doubleTap.js

Answer 5

您可以使用UIEvent.detail，如果你要检测的元素被点击了多少次，并根据火灾事件。

一个简单的例子：

element.addEventListener("click", function (e) {
  if (e.detail === 1) {
    // do something if the element was clicked once.
  } else if (e.detail === 2) {
    // do something else if the element was clicked twice
  }
});