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

Andrman 发布于2019-08-26 13:27 / 2511人阅读

摘要：事件绑定中，执行双击事件时能触发两次单击事件。解决的思路使用定时器清除掉两个单击事件，留下一个双击事件。待第二次单击的时候，假设距离第一次单击事件是如果你的定时器小于那么第一次的任务队列就会执行完。

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

先看一下点击事件的执行顺序：

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

在单击的时候不会执行双击，但是双击的时候会执行两次单击再执行双击事件。
解决的思路：使用定时器清除掉两个单击事件，留下一个双击事件。

setTimeout



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是酌情值，大于间隔就行。

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

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

专线服务 idc机房托管 js触发click事件 js 输入时触发事件不触发鼠标按下事件 WebRTC源码offer不触发事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108840.html

“click延时”是怎么来的与自定义tap事件解决“点透”

摘要：早期版本的的就是如此处理的，自定义事件在中触发，解决单击延时的问题。给按钮绑定事件事件执行自定义事件触发上的事件当然实际中肯定要放在其他的事件回调中，不然没办法响应用户操作。 click延时在移动设备上按下手指单击，按先后顺序，依次会发生touchstart->-touchmove（如果有的话）>touchend->mousedown->mousemove（如果有的话）->mouse...

kid143 2019-08-20 14:48 评论0 收藏0
JavaScript 事件——“事件类型”中“焦点、鼠标和滚轮事件”的注意要点

摘要：焦点事件一般利用这些事件与方法和属性配合。此外，支持一个名为的类似事件，也是在鼠标滚动滚轮时除法。焦点事件一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合。主要有： blur：元素失去焦点，不会冒泡； DOMFocusIn：同HTML事件focus，于DOM3遭废弃，选用focusin； DOMFocusOut：同...

clasnake 2019-08-19 17:23 评论0 收藏0
jQuery 事件(一) 鼠标与键盘事件

jQuery 鼠标事件 click与dbclick事件用交互操作中，最简单直接的操作就是点击操作。jQuery提供了两个方法一个是click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作。这两个方法的用法是类似的，下面以click()事件为例方法一：$ele.click() 绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少点击触发 $(ele...

Gemini 2019-08-21 11:55 评论0 收藏0
JQuery基础修炼-事件篇

摘要：目录第章事件介绍第章鼠标事件第章表单事件第章键盘事件第章事件的绑定和解绑第章事件对象的使用第章自定义事件与事件用交互操作中，最简单直接就是点击操作。提供了两个方法一个是方法用于监听用户单击操作，另一个方法是方法用于监听用户双击操作。目录第1章事件介绍第2章鼠标事件第3章表单事件第4章键盘事件第5章事件的绑定和解绑第6章事件对象的使用第7章自定义事件 cli...

yy13818512006 2019-08-02 15:55 评论0 收藏0
JQuery基础修炼-事件篇

摘要：目录第章事件介绍第章鼠标事件第章表单事件第章键盘事件第章事件的绑定和解绑第章事件对象的使用第章自定义事件与事件用交互操作中，最简单直接就是点击操作。提供了两个方法一个是方法用于监听用户单击操作，另一个方法是方法用于监听用户双击操作。目录第1章事件介绍第2章鼠标事件第3章表单事件第4章键盘事件第5章事件的绑定和解绑第6章事件对象的使用第7章自定义事件 cli...

hikui 2019-08-19 18:25 评论0 收藏0