JavaScript 区分单击与双击事件的实现原理与代码示例

单击与双击事件的触发顺序分析

首先，我们需要了解鼠标点击事件在浏览器中的具体执行顺序。

对于单击操作（click），其触发顺序依次为：mousedown、mouseup、click。

对于双击操作（dblclick），其触发顺序较为复杂，依次为：mousedown、mouseup、click、再次mousedown、再次mouseup、再次click，最后触发dblclick。

关键点在于，当双击事件发生时，前两次单击事件中，第一次的单击事件会被系统屏蔽，而第二次单击事件依然会触发。这意味着双击操作最终会返回一次单击结果和一次双击结果，而非两次单击加一次双击。

因此，解决单击与双击冲突的核心思路，就是消除那个多余的、被屏蔽的单击事件的影响。

实现这一目标的有效工具是 setTimeout 定时器。

 
// 定义用于存储定时器引用的变量
var TimeFn = null;
$('div').click(function () {
// 每次触发单击时，先取消上一次未执行的延时任务
clearTimeout(TimeFn);
// 设置一个新的延时执行器
TimeFn = setTimeout(function(){
// 在此处编写单击事件需要执行的代码逻辑
},300);
}); 
});
$('div').dblclick(function () {
// 触发双击时，立即取消单击的延时任务，防止其执行
clearTimeout(TimeFn);
})