js双击会触发两次单击事件的解决方案

猴子请来的水军。

于 2020-09-27 13:42:45 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

原文链接：https://blog.youkuaiyun.com/u013938578/article/details/104335831

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

问题描述：
javascript中，onclick为单击事件，ondblclick为双击事件，在同一DOM 对象上加上单击事件和双击事件时，双击会触发两次单击事件。

解决方案：
通过设置两次点击事件的间隔时间(setTimeout 方法)，来实现双击、单击事件并存。

单击后不立刻执行相关的代码，而是让其延时执行（比如：200ms），如果随后发生了双击事件，则取消延时执行的方法，只执行双击事件方法。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <!--<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>-->
    <title>单双击事件测试</title>
</head>
<body>
<button onclick="test()" ondblclick="dbclick()">测试</button>
</body>
 
<script>
    var timeId;
    function test() {
        clearTimeout(timeId);
        timeId = setTimeout(function () {
            console.log("单击");
        }, 250);
    }
    function dbclick() {
        clearTimeout(timeId);
        console.log("双击");
    }
</script>
</html>