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')
})
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,884评论 1 11
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 5,222评论 0 8
  • 我不知道我要去哪,但我不想停下来
    大哼阅读 1,427评论 0 0
  • 家庭教育每日分享20180604 导致孩子今天各种问题的,不是孩子此时表现出的让你愤怒的行为,而是你昨天对孩子不...
    左叶右李阅读 1,427评论 0 0
  • 四人党成员: 兵:小邵她妈, 家中还有小二一枚,心思细腻,善良贤惠,此人出门只带现金----------懂“只带”...
    小月半脚阅读 3,780评论 0 1

友情链接更多精彩内容