js双击会进入2次单机,单双击冲突,避免双击进入单机2次方案

7712次浏览

前言

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前端博客

相关文章: