jquery解决同时绑定单双击事件的冲突（详解）

最新推荐文章于 2024-05-21 14:15:14 发布

大丘丘病了二丘丘瞧

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量1.4k

点赞数 10

文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_44748206/article/details/119987625

版权

问题

如果给一个jquery获取的对象同时绑定单击和双击事件，那么在触发双击事件的同时必定会触发两次单击事件。（如下图所示）

<body>
  <button>点击</button>
  <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
  <script>
    $('button').click(function () { console.log('单击') });
    $('button').dblclick(function () { console.log('双击') });
  </script>
</body>

以下分别是单击和双击时控制台打印的结果

’

解决思路

第一步：在单击事件里设置一个定时器来执行事件内容，并且在每次单击事件执行的第一步清除定时器（类似节流的写法）。这一步保证在双击的时候第一次单击的内容不会被执行。

第二步：在双击事件的第一步清除定时器，这样就保证了第二次单击内容也不会被执行，而只有双击事件执行。

代码实现：

<body>
  <button>点击</button>
  <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
  <script>
    var timeout
    $('button').click(() => {
      // 清除之前的定时器
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        // 执行单击内容
        console.log('单击');
      }, 200)
    });
    $('button').dblclick(() => {
      clearTimeout(timeout);
      console.log('双击');
    });
  </script>
</body>

以下为双击时控制台打印的结果