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

原生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 单击、双击、连续多次点击相关推荐

JS单击/双击编辑功能
JS单击/双击编辑功能 HTML <!DOCTYPE html> <html lang="en"> <head><meta charset ...
js单击、双击、连续多次点击
文章目录单击双击单击双击同时存在连续多次点击单击原生javascript为我们提供了单击和双击(click 和 dblclick)两种点击事件的监听 var oBtn = document ...
java鼠标各按键单击和左键击双击
下面代码实现了鼠标各按键单击和左键击双击,以及右键弹出菜单 JButton btn = new JButton("鼠标左键.右键.滚轮点击测试");btn.addMouseList ...
java 双击按键_java鼠标各按键单击和左键击双击
下面代码实现了鼠标各按键单击和左键击双击,以及右键弹出菜单 JButton btn = new JButton("鼠标左键.右键.滚轮点击测试"); btn.addMouseLis ...
多功能按键的实现方法，单击，双击，三击，短按，长按
公司一个刚毕业不久的小朋友在做一个多功能的按键驱动,他想不出方法,于上老大让我帮忙,我看了一下需求,写起来确实有点复杂,所以要借助一些思维导图写一个状态机比较好解理. 以下我将一个功能的按键的实现画成 ...
JS中解决单击双击事件的冲突
当一个元素上即绑定了单击事件又绑定了双击事件,双击元素时会先触发单击事件,没有达到我们理想的效果从而影响了用户体验. 解决方法: // 解决同一个元素使用单击双击事件的冲突 // 解决思路:单击事件后 ...
【按键】[独立按键] - 1：单击，双击，三击以及N击
此按键程序的实现的功能是单个独立按键的[单击],[长按],[双击],[三击]以及[多击].本文分为三个部分, 第一个部分是说[单击],[长按]的程序: 第二部分是讲[双击]: 第三部分是讲[三击],[ ...
Android 单击+双击+短按+长按逻辑
ACTION_DOWN事件 ->mPrivateHandler.sendEmptyMessageDelayed(SWITCH_TO_SHORTPRESS, TAP_TIMEOUT) 发延迟处理的 ...
html双击变成可编辑状态,JS实现双击编辑可修改状态的方法
本文实例讲述了JS实现双击编辑可修改状态的方法.分享给大家供大家参考.具体如下: 这是现在流行的一个表单特效,在网页上单击某文字,文字变为编辑状态,或者是让输入新文字,这就是JavaScript控制表 ...
多功能按键设计——利用一个I/O口，接一个按键，实现3功能操作：单击 + 双击 + 长按
看了一个晚上,结合了马潮老师的书,才搞懂这个程序,确实经典!原文: 题目:多功能按键设计.利用一个I/O口,接一个按键,实现3功能操作:单击 + 双击 + 长按. (amobbs.com 阿莫电子论坛 ...

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

单击

双击

单击双击同时存在

连续多次点击

js 单击、双击、连续多次点击相关推荐

最新文章

热门文章