JS双击触发2次单击问题解决方案/js区分单击和双击/连续点击事件

开发过程中，我们可能会遇到单击（onclick）和双击（ondblclick）需要实现不同的交互效果。当我们在同一个对象同时绑定了onclick和ondblclick事件，双击对象会执行2次单击事件和1次双击事件。如果我们要把它们做区分，双击事件不会执行单击事件，怎么处理呢？那如果需要实现连续点击事件，我们又该怎么处理呢？请看下文。1、区分单双击事件在单击事件设置一个定时器，执行双击时，不会马上执

无翼之雀

6892人浏览 · 2021-11-12 17:07:16

无翼之雀 · 2021-11-12 17:07:16 发布

开发过程中，我们可能会遇到单击（onclick）和双击（ondblclick）需要实现不同的交互效果。当我们在同一个对象同时绑定了onclick和ondblclick事件，双击对象会执行2次单击事件和1次双击事件。如果我们要把它们做区分，双击事件不会执行单击事件，怎么处理呢？那如果需要实现连续点击事件，我们又该怎么处理呢？请看下文。

1、区分单双击事件

在单击事件设置一个定时器，执行双击时，不会马上执行定时器里的内容（比如，延时500ms），继而先执行双击事件内容，在双击事件中清除了定时器，这样双击事件就不会触发单击事件中setTimeout里面的方法。从而实现了单击和双击事件的区分。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>区分单双击</title>
  </head>
  <body>
    <div>
      <button onclick="clickFn()" ondblclick="dblClickFn()">点击</button>
    </div>
    <script>
      let timer = null
      function clickFn() {
        clearTimeout(timer)
        timer = setTimeout(function () {
          console.log("单击")
        }, 500)
      }
      function dblClickFn() {
        clearTimeout(timer)
        console.log("双击")
      }
    </script>
  </body>
</html>

2、实现连续点击事件

js仅提供了单击（onclick）和双击（ondblclick）方法，并没有提供多次点击的方法。如果我们需要连击n次后再触发事件，则需要自己封装点击事件。通过记录用户的点击次数以及设置定时器去实现。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>连击事件</title>
  </head>
  <body>
    <div>
      <button onclick="clickRepeatedly(5)">点击</button>
    </div>
    <script>
      let count = 0,
        timer
      function clickRepeatedly(num) { // num为设定触发事件的连击次数
        if (count < num - 1) {
          timer && clearTimeout(timer)
          count++
          console.log("count", count)
          timer = setTimeout(function () {
            count = 0
          }, 300) // 间隔300ms以内才算连续点击
        } else {
          // 5次连击后触发
          count = 0
          clearTimeout(timer)
          console.log("连续点击了5次")
        }
      }
    </script>
  </body>
</html>

感谢您读完本文！如果本文对您有帮助，请点个赞呗，您的点赞是对我最大的支持和认可！

我的公众号：大前端教程，欢迎关注，会定期更新前端知识，希望能帮到您。