js单击、双击、连续多次点击

2023-10-09 22:15| 来源: 网络整理| 查看: 265

文章目录单击双击单击双击同时存在连续多次点击

单击

原生javascript为我们提供了单击和双击（click 和 dblclick）两种点击事件的监听

var oBtn = document.getElementById('clickBtn'); oBtn.onclick = function(){ console.log('单击'); } 双击 var oBtn = document.getElementById('clickBtn'); oBtn.ondblclick = function(){ console.log('双击'); } 单击双击同时存在

click和dblclick同时存在，click执行的优先级更高，因此，如果我们将click和dbclick绑定在同一个对象上时，双击对象一共会执行两次click事件和一次dbclick事件，如果我们想执行dbclick的时候不去执行click事件，需要借助一个定时器

代码如下：

原生javascript里是没有判断多次点击的方法，如果需要判断连续多次点击，需要我们自己去封装一个多次点击的函数这里需要注意的一点是，要判断用户是否为连续点击，要去记录用户点击操作的时间间隔，如果时间间隔超过一个值，才将累计点击次数加1，当累计点击次数达到需求时，才触发事件

代码如下:

var timer = null; var waitTime = 200; // 该时间间隔内点击才算连续点击（单位：ms） var lastTime = new Date().getTime(); // 上次点击时间 var count = 0; // 连续点击次数 // 获取对象 var oBtn = document.getElementById('clickBtn'); oBtn.onclick = function(event) { var currentTime = new Date().getTime(); // 计算两次相连的点击时间间隔 count = (currentTime-lastTime) // 连续点击五次或者五次以上的点击事件 console.log('点击超过4次了') } }, waitTime + 10) };

【本文地址】

公司简介

联系我们