双击事件（dblclick）时，不触发单击事件(click)

双击事件（dblclick）时，不触发单击事件(click)

现象——事件绑定中，执行双击事件(dblclick)时，除了触发双击，也触发了两次单击事件(click)。

即一个标签元素（如button等），如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时，不会触发双击事件(dblclick)， 执行双击事件(dblclick)时却会触发两次单击事件(click)。

点击事件的执行顺序

单击(click)：mousedown，mouseout，click；
双击(dblclick)：mousedown，mouseout，click ， mousedown，mouseout，click，dblclick；

在单击的时候不会执行双击，但是双击的时候会执行两次单击再执行双击事件。
解决的思路：

使用定时器清除掉两个单击事件，留下一个双击事件。

参考地址——https://blog.csdn.net/weixin_44867717/article/details/109290567

函数防抖

• 防止发送请求的频率（防抖）
  • 在固定的时间内，没有触发特定的条件，就执行一次任务

实例1–简略版

index.html

<button onclick="single(event)" ondblclick="double(event)">按钮</button>
<script>
    var time = 200; //300以上，双击才生效
    var timeOut = null;

    function single (e) {
        clearTimeout(timeOut); // 清除第一个单击事件
        timeOut = setTimeout(function () {
            console.log('单击');
            // 单击事件的代码执行区域
            // ...
        }, time)
    }
    function double (e) {
        clearTimeout(timeOut); // 清除第二个单击事件
        console.log('双击')
        // 双击的代码执行区域
        // ...
    }
</script>

参考2

<button onclick="single(event)" ondblclick="double(event)">按钮</button>

<script>
    var timer;
    function single (e) {
        clearTimeout(timer);//清除第一次的单击事件
        timer = setTimeout(function () {
            console.log('单击');
            // 单击事件的代码执行区域
            // ...
        }, 500)
    }
    function double (e) {
        clearTimeout(timer);//清除第二次的单击事件
        console.log('双击')
        // 双击的代码执行区域
        // ...
    }
</script>

现在，单击按钮打印“单击”，双击按钮打印“双击”。

实例2–页面demo

index.html

<style type="text/css">
    #eventDiv {
        width: 200px;
        height: 200px;
        background: red;
    }
</style>
<div id="eventDiv"></div>
</body>
<script type="text/javascript">
    //1,单击事件 onclick
    var timer;
    eventDiv.onclick = function () {
        //setTimeout 计时器(延时器)
        clearTimeout(timer);//清除第一次的单击事件
        //500毫秒之后运行点击事件
        timer = setTimeout(function () {
            eventDiv.style.background = "blue";//单击变蓝色
            console.log("单击");
        }, 500);

    }

    //2,双击事件
    eventDiv.ondblclick = function () {
        clearTimeout(timer);//清除第二次的单击事件
        eventDiv.style.background = "yellow";//双击变黄色
        console.log("双击");
    }
</script>

实例3-接口版

index.vue

<script>
    timeOut = null;

    //获取接口详情
    getDetail(action) {
        //取消上次延时未执行的方法
        clearTimeout(this.timeOut); // 清除第一个单击事件
        //执行延时
        this.timeOut = setTimeout(function () {
            console.log('单击');
            // 单击事件的代码执行区域
            // ...
        }, ms:500)
    }
    actionEdit (action) {
        //取消上次延时未执行的方法
        clearTimeout(timeOut); // 清除第二个单击事件
        console.log('双击')
        // 双击的代码执行区域
        // ...
    }
</script>

释义

关于 time=200，大家知道js的事件循环机制，点击事件会添加一个任务队列。time=0， 也会添加一个任务队列。那么time=0与time=200有什么区别呢？

因为第一次单击事件后，主线程没有任何任务，就会立马执行这个单击事件的任务。待第二次单击的时候，假设距离第一次单击事件是150ms, 如果你的定时器小于150ms, 那么第一次的任务队列就会执行完。
要想不执行第一次的任务队列，那么定时器时间间隔就必须大于两次单击的时间间隔了。 所以，这个200是酌情值，大于间隔就行。常用值有：200、300、500、1000

第一次单击任务不执行了，是被定时器延时，然后第二次点击的时候给清除了。那么第二次点击事件呢？
在两次单击之后，会立马执行一个双击事件，双击事件的一开头就把这个第二次点击事件给清除了。

这就是双击事件的大概过程。