开发过程中，我们可能会遇到单击（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 = nullfunction 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,timerfunction 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 = 0clearTimeout(timer)console.log("连续点击了5次")}}</script></body></html>
感谢您读完本文！如果本文对您有帮助，请点个赞呗，您的点赞是对我最大的支持和认可！
我的公众号：大前端教程，欢迎关注，会定期更新前端知识，希望能帮到您。
如果觉得《JS双击触发2次单击问题解决方案/js区分单击和双击/连续点击事件》对你有帮助，请点赞、收藏，并留下你的观点哦！
