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

How to deal with click and dblclick event bind on same dom in Javascript

本文关键字：click 上的 dblclick 绑定 事件 dom Javascript 处理      更新时间：2023-09-26

我想在同一DOM上绑定点击和dblclick事件，但dblclick始终处于活动状态的点击事件。如何做到两个事件互不影响！

如果你使用 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.');
   }
});
等待通过

setTimeout 少量响应点击，如果您看到双击，请不要执行点击操作。不幸的是，时机非常棘手——太少了，你在不应该的时候得到点击，太多，点击真的很滞后。

const div = document.getElementById("the-div");
let clickTimer = 0;
div.addEventListener(
    "click",
    function () {
        clearTimeout(clickTimer);
        clickTimer = setTimeout(function () {
            console.log("clicked");
            clickTimer = 0;
        }, 250);
    },
    false
);
div.addEventListener(
    "dblclick",
    function () {
        clearTimeout(clickTimer);
        console.log("double-clicked");
    },
    false
);
#the-div {
    user-select: none;
}
<div id="the-div">Click and/or double-click me</div>

这是一个使用 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);
};

js小提琴

相关文章：