双击事件(dblclick)时,不触发单击事件(click)

61次阅读

共计 1014 个字符,预计需要花费 3 分钟才能阅读完成。

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

先看一下点击事件的执行顺序:
单击(click):mousedown,mouseout,click;双击(dblclick):mousedown,mouseout,click,mousedown,mouseout,click,dblclick;
在单击的时候不会执行双击,但是双击的时候会执行两次单击再执行双击事件。解决的思路:使用定时器
setTimeout
<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 的事件循环机制,点击事件会添加一个任务队列。tim=0,也会添加一个任务队列。那么 time= 0 与 time=200 有什么区别呢?
因为第一次单击事件后,主线程没有任何任务,就会立马执行这个单击事件的任务。待第二次单击的时候,假设距离第一次单击事件是 150ms, 如果你的定时器小于 150ms, 那么第一次的任务队列就会执行完。要想不执行第一次的任务队列,那么定时器时间间隔就必须大于两次单击的时间间隔了。所以,这个 200 是酌情值,大于间隔就行。
第一次单击任务不执行了,是被定时器延时,然后第二次点击的时候给清除了。那么第二次点击事件呢?在两次单击之后,会立马执行一个双击事件,双击事件的一开头就把这个第二次点击事件给清除了。
这就是双击事件的大概过程。

正文完
 0