版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82655648
jQuery 解决 click 和 dblclick 冲突
click 是单击事件, dblclick 是双击事件
如果给一个 DOM 元素同时绑定两个事件,则会导致响应 dblclick 时会同时响应 click
更多精彩
- 更多技术博客,请移步 asing1elife’s blog
制定延迟策略
-
set()
用于为待执行方案设置一个延迟 -
clear()
用于清空设置的延迟
var clickTimeout = {
_timeout: null,
set: function (fn) {
var that = this
that.clear()
that._timeout = setTimeout(fn, 300)
},
clear: function () {
var that = this
if (that._timeout) {
clearTimeout(that._timeout)
}
}
}
为单击事件添加延迟操作
- 由于单击事件默认优先响应,所以需要为单击事件设置延迟策略,从而给双击事件足够的响应时间
$('#btn').on('click', function () {
clickTimeout.set(function () {
console.log('this is click')
})
})
在响应双击事件时清空延迟
- 双击事件响应完毕后,清空延迟策略
$('#btn').on('dblclick', function() {
clickTimeout.clear()
conosle.log('this is dblckick')
})