jQuery 解决 click 和 dblclick 冲突

简介: 版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82655648 ...
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82655648

jQuery 解决 click 和 dblclick 冲突

click 是单击事件, dblclick 是双击事件
如果给一个 DOM 元素同时绑定两个事件,则会导致响应 dblclick 时会同时响应 click

更多精彩

制定延迟策略

  1. set() 用于为待执行方案设置一个延迟
  2. 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)
    }
  }
}

为单击事件添加延迟操作

  1. 由于单击事件默认优先响应,所以需要为单击事件设置延迟策略,从而给双击事件足够的响应时间
$('#btn').on('click', function () {
    clickTimeout.set(function () {
        console.log('this is click')
    })
})

在响应双击事件时清空延迟

  1. 双击事件响应完毕后,清空延迟策略
$('#btn').on('dblclick', function() {
    clickTimeout.clear()

    conosle.log('this is dblckick')
})
目录
相关文章
|
6月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
60 1
|
3月前
|
Web App开发 JavaScript Android开发
重载jquery on方法实现click事件在移动端的快速响应
重载jquery on方法实现click事件在移动端的快速响应
|
JavaScript
jQuery中$.click()没有触发
jQuery中$.click()没有触发
132 0
|
JavaScript 前端开发
html页面元素onclick 和 jquery绑定click执行顺序
html页面元素onclick 和 jquery绑定click执行顺序
349 0
|
JavaScript PHP
jquery同时给两个元素绑定同一个click事件
jquery同时给两个元素绑定同一个click事件
470 0
|
JavaScript 前端开发
Jquery 实现click 选中checkbox 多选(或一键选中全部或取消全部)实例代码
Jquery 实现click 选中checkbox 多选(或一键选中全部或取消全部)实例代码
277 0
|
JavaScript
$("#XXX").click()和$("#YYY").on("click","指定的元素",function(){});的区别(jQuery动态绑定事件)
      //绑定 下一页 的点击事件 $("a[aria-label='Next']").click(function(){ $("a[aria-label='Previous']").
1448 0