当一个元素上即绑定了单击事件又绑定了双击事件,双击元素时会先触发单击事件,没有达到我们理想的效果从而影响了用户体验。
解决方法:
// 解决同一个元素使用单击双击事件的冲突
// 解决思路:单击事件后延迟一定时间执行函数,如果这段时间内触发了双击事件
// 则清除单击事件,如果这段时间结束了还没第二次点击则认为是单击事件,触发函数
<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>