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

最新推荐文章于 2023-08-09 16:26:03 发布

铁臂A木木

最新推荐文章于 2023-08-09 16:26:03 发布

阅读量1.9k

点赞数

文章标签： javascript 前端点击事件

本文链接：https://blog.csdn.net/AstroSadmummy/article/details/122404786

版权

当一个元素上即绑定了单击事件又绑定了双击事件，双击元素时会先触发单击事件，没有达到我们理想的效果从而影响了用户体验。

解决方法：

// 解决同一个元素使用单击双击事件的冲突
// 解决思路：单击事件后延迟一定时间执行函数，如果这段时间内触发了双击事件
// 则清除单击事件，如果这段时间结束了还没第二次点击则认为是单击事件，触发函数
<body>
    <div>是兄弟就点我！</div>
</body>
<script>
 let timer = null;
    document.querySelector('div').addEventListener('click', function () {
        clearTimeout(timer); //清除未执行的定时器
        timer = setTimeout(function () {
            console.log('单击');
        }, 400);
    });
    document.querySelector('div').addEventListener('dblclick', function () {
        clearTimeout(timer); //清除未执行的定时器
        console.log('双击');
        
    })
</script>

铁臂A木木

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS中解决单击双击事件的冲突

当一个元素上即绑定了单击事件又绑定了双击事件，双击元素时会先触发单击事件，没有达到我们理想的效果从而影响了用户体验。解决方法：// 解决同一个元素使用单击双击事件的冲突// 解决思路：单击事件后延迟一定时间执行函数，如果这段时间内触发了双击事件// 则清除单击事件，如果这段时间结束了还没第二次点击则认为是单击事件，触发函数<body> <div>是兄弟就点我！</div></body><script> let time
复制链接

扫一扫