文章目录
单击双击单击双击同时存在连续多次点击单击
原生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事件,需要借助一个定时器
代码如下:
var timer = null;var oBtn = document.getElementById('clickBtn');oBtn.onclick = function(){clearTimeout(timer);timer = setTimeout(function(){clearTimeout(timer);console.log('单击');}, 200)}oBtn.ondblclick = function(){clearTimeout(timer);console.log('双击');}
连续多次点击
原生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) < waitTime ? count + 1 : 1;lastTime = new Date().getTime();clearTimeout(timer);timer = setTimeout(function() {clearTimeout(timer);// 处理点击事件console.log(count);if (count > 4) {// 连续点击五次或者五次以上的点击事件console.log('点击超过4次了')}}, waitTime + 10)};
如果觉得《js单击 双击 连续多次点击》对你有帮助,请点赞、收藏,并留下你的观点哦!