前言
js双击会进入2次单机,单双击冲突,避免双击进入单机2次方案。这个问题是很常见的问题,解决也很简单。
思路
只需要在双击的时候把单机事件清理掉就可以了,不过单机要延迟,这个延迟事件是多久呢?经过测试200毫秒有时候还是会双击触发单机,250ms刚刚好。
代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>单双击事件测试</title>
</head>
<body>
<button onclick="haoroomstest()" ondblclick="dbclick()">测试</button>
<button id='dom2click'>dom2点击测试</button>
</body>
<script>
var timeId;
function haoroomstest() {
clearTimeout(timeId);
timeId = setTimeout(function () {
console.log("进入了单击");
}, 250);
}
function dbclick() {
clearTimeout(timeId);
console.log("进入了双击");
}
let dom = document.getElementById('dom2click')
dom.addEventListener('click',()=>{
clearTimeout(timeId);
timeId = setTimeout(function () {
console.log("单击");
}, 250);
})
dom.addEventListener('dblclick',()=>{
clearTimeout(timeId);
console.log("双击");
})
</script>
</html>
更多前端知识,欢迎关注haorooms前端博客