如果一个节点同时绑定了单击和双击事件, 那么双击的时候就会触发两次单击事件, 两个事件存在冲突。
可以通过增加一个延迟时间来解决这个问题.
let click_store = null; // 存储单击事件
// 单击事件
function single(){
// 清除第一次单击事件
clearTimeout(click_store)
click_store = setTimeout(function () {
// 单击事件的代码
// ...
}, 300)
}
// 双击事件
function double(){
// 清除第二次单击事件
clearTimeout(click_store)
// 双击事件代码
// ...
}
原理是:
- 双击时, 首先触发了单击事件, 由于设置了 300ms 的延迟, 所以单击事件并没有立即触发, 这个单击事件被存储在了
click_store
中. - 在这300ms内, 发生了第二次单击鼠标的行为(双击), 触发了双击事件和第二次单击事件.
- 单击事件先发生,
clearTimeout(click_store)
清除了存储在click_store
中的第一次的单击事件, 然后进入定时器, 单击事件被存储在了click_store
中, 并且延迟300ms执行. - 在双击事件中,
clearTimeout(click_store)
清除了存储在click_store
中的第二次单击事件, 然后执行了双击事件的代码. - 两次单击事件都被清除了, 所以最后发生的只有双击事件的代码.
本文参考:
- JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突,双击事件触发单击事件 (这篇文章给的方法没有取消第二个单击事件, 所以最后会触发双击事件和一次单击事件)
- 双击事件(dblclick)时,不触发单击事件(click)