剖析JavaScript中click与dblclick冲突与共存

在前端开发中, 如果给某个DOM元素绑定了click事件, 且绑定了dblclick事件, 会导致某些冲突.例如,在本次项目中我给一个按钮绑定了一个单击请求一条信息的a方法,双击请求另一条信息的b方法,结果导致双击调用了2次a方法、1次b方法。


首先我们要了解一下双击的机制:

双击(dblclick)的流程是:mousedownmouseoutclickmousedownmouseoutclickdblclick

原因分析:

  • 双击操作依赖两次单击操作,没有办法改变浏览器触发单/双击事件的机制, 但有办法避免在双击过程中执行两次并不希望执行的click事件监听器吗?

解决方法:

  • 要想实现双击我们必须屏蔽这两次click,因此我们在click里面设置一个定时器,延迟执行function(a)。

var _time = null;
$("button").dblclick(function (e) {
clearTimeout(_time);
console.log("dblclick");
//双击方法b
}).click(function (e) {
clearTimeout(_time);
_time = setTimeout(function () {
console.log("click");
//单击方法a
}, 300);
});

劣势:

  • 单击操作下的a方法的执行开始时间比正常情况要慢300ms

共有 0 条评论

Top