开发过程中,我们可能会遇到单击(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区分单击和双击/连续点击事件》对你有帮助,请点赞、收藏,并留下你的观点哦!