双击事件不触发单击事件

2,439 阅读2分钟

在单击的时候不会执行双击,但是双击的时候会执行两次单击再执行双击事件。

解决的思路:要想双击时不执行单击事件,就使用定时器清除掉两个单击事件,留下一个双击事件。

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

var time = 200;
var timeOut  = null;

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

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

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

第一次单击任务不执行了,是被定时器延时,然后第二次点击的时候给清除了。那么第二次点击事件呢?
在两次单击之后,会立马执行一个双击事件,双击事件的一开头就把这个第二次点击事件给清除了。至此两个单击时间全部被清除了,大功告成。

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