onClick 事件和 onDblClick 事件并存的解决方法

最新推荐文章于 2021-04-21 10:41:53 发布

@云深不知处

最新推荐文章于 2021-04-21 10:41:53 发布

阅读量1.5k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_40202869/article/details/88838910

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近项目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件，如果按照正常的方式添加处理，结果发现只会执行 onclick，
而不会执行 ondblclick；
这时我们需要对2个事件的处理函数稍作处理就可以实现2个事件并存了，代码如下：

<body>
  <div "test1()" "test2()" class="test"></div>
</body>
<script>
  var timer;
  function test1() {
    console.log(1111111)
    if (timer) {
      clearTimeout(timer);
      timer = null
    }
    console.log(222222222)
    timer = setTimeout(function() {
      alert('单击')
    }, 300)
    
  }
  function test2() {
    console.log(3333333333)
    if (timer) {
      clearTimeout(timer);
      timer = null
    }
    alert('双击')
  }
</script>

在这里插入图片描述
处理思想就是：利用定时器延迟执行onclick事件，这样在双击过程中会取消中途触发的单击事件
从图中可以看出：双击的时候会阻止两次单击事件

@云深不知处

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
onClick 事件和 onDblClick 事件并存的解决方法

最近项目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件，如果按照正常的方式添加处理，结果发现只会执行 onclick，而不会执行 ondblclick；这时我们需要对2个事件的处理函数稍作处理就可以实现2个事件并存了，代码如下：<body> <div "test1()" "test2()" class="test"><...
复制链接

扫一扫