触发dblclick事件时，避免触发click事件-实例

最新推荐文章于 2024-07-20 17:05:30 发布

李小苶

最新推荐文章于 2024-07-20 17:05:30 发布

阅读量1.4k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_26834399/article/details/105773512

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

正常情况下触发双击dblclick事件时会同时触发两遍单击click事件，这肯定不是我们想要的结果，那么如何避免伴随触发click事件呢？

浏览器监听双击事件的机制是，有没有在一定时间内监听到两次连续的单击事件，从这个角度出发，我们可以对单击事件进行延时执行，若在一定时间内没有第二次单击事件，则执行单击事件代码；若监听到了第二次单击事件，则执行双击事件，而不执行单击事件。

实例代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
    <title>单双击事件测试</title>
</head>
<body>
<div onclick="test('one')" ondblclick="test()">点击测试</div>
</body>
 
<script>
    var timeId;
    function test(type) {
        clearTimeout(timeId);
        if(type=='one'){
          timeId = setTimeout(function () {
              alert("单击");
          }, 250);
        }else{
          alert("双击");
        }
    }
</script>
</html>