JS中解决单击双击事件的冲突的问题

山楂树の

已于 2022-12-03 15:00:48 修改

阅读量3.2k

点赞数 2

文章标签： javascript 前端 vue.js

于 2022-12-03 14:51:08 首次发布

本文链接：https://blog.csdn.net/dabaooooq/article/details/128161165

版权

当一个父节点上即绑定了双击事件，子节点又绑定了单击时，单击或双击子节点时，根据事件流中的冒泡阶段都会先触发子节点上的单击事件，然后冒泡到父节点，而有时我们并不想要子节点的单击事件触发

解决思路：

1. 设置定时器，时间设置为200ms内（超过200ms延迟效果就会有所感知）

2. 把单击事件的逻辑放在定时器内，每次触发单击事件前先清除之前未执行的定时器，重新开启

3. 触发双击事件同样先清除之前未执行的定时器

4. 效果达成，连续两次单击间隔小于200ms执行双击事件，大于200ms定时器未被清除，执行单击事件逻辑

<body>
   <ul>
     <li>点我点我！</li>     
   </ul>
</body>
<script>
 let timer = null;
    document.querySelector('li').addEventListener('click', function () {
        clearTimeout(timer); //清除未执行的定时器
        timer = setTimeout(function () {
            console.log('单击');
        }, 200);
    });
    document.querySelector('ul').addEventListener('dblclick', function () {
        clearTimeout(timer); //清除未执行的定时器
        console.log('双击');
    })
</script>