如何在Javascript中处理同一个dom上的click和dblclick事件绑定答案

【问题标题】：How to deal with click and dblclick event bind on same dom in Javascript如何在Javascript中处理同一个dom上的click和dblclick事件绑定
【发布时间】：2015-04-02 09:06:07
【问题描述】：

我想在同一个DOM 上绑定 click 和 dblclick 事件，但 dblclick 总是激活 click 事件。如何做到这两个事件不相互影响！

【问题讨论】：

how to differentiate single click event and double click event?的可能重复

标签： javascript

【解决方案1】：

等待通过setTimeout 以微小量响应点击，如果您看到双击，请不要执行点击操作。不幸的是，时机非常棘手 - 太少，您在不应该点击的时候获得点击，太多，点击真的滞后。

var div = document.getElementById("the-div");
var clickTimer;
div.addEventListener("click", function() {
  clearTimeout(clickTimer);
  clickTimer = setTimeout(function() {
    snippet.log("clicked");
    clickTimer = 0;
  }, 250);
}, false);
div.addEventListener("dblclick", function() {
  clearTimeout(clickTimer);
  snippet.log("double-clicked");
}, false);

<div id="the-div">Click and/or double-click me</div><!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

【讨论】：

【解决方案2】：

这是一个使用setTimeout 的演示，您可以分别处理click 和dblclick 事件。使用bool 变量，您可以决定是单击还是双击并相应地创建处理程序。

HTML：

<div>Bingo</div>

CSS：

div{
    width : 100px;
    height : 100px;
    background-color: blue;
}

javaScript：

var div = document.getElementsByTagName("div")[0];
var isSingleClick = true;
div.onclick = function(){
    setTimeout(function(){
        if(isSingleClick){
            console.log("Click");
        }
    }, 500);
};

div.ondblclick = function(){
    console.log("DBLClick");
    isSingleClick = false;
    setTimeout(function(){
        isSingleClick = true;
    }, 500);
};

jsFiddle

【讨论】：

【解决方案3】：

如果你使用 jquery，你可以扩展 jquery 插件。使用 javascript 的非阻塞特性和回调特性来处理这个问题。你可以试试这个插件：https://github.com/sgyyz/jquery-oneordoubleclick，它适用于你的 jquery 模块。

$target_node.oneordoubleclick({oneclick: function(){
    console.log('you have click this node.');
   }, dbclick: function() {
    console.log('you have double click this node.');
   }
});

【讨论】：