JS鼠标3次点击事件实现代码及扩展思路
程序员文章站
2022-04-29 08:00:37
这几天看了一下javascript高级程序设计中的dom事件相关内容,同时看到网上有关鼠标多次点击事件,鼠标事件是简单、常用的事件之一,于是便针对点击事件进行一些小的扩展和...
这几天看了一下javascript高级程序设计中的dom事件相关内容,同时看到网上有关鼠标多次点击事件,鼠标事件是简单、常用的事件之一,于是便针对点击事件进行一些小的扩展和实现,增强对dom事件的进一步理解。其中的实现和思路是自己总结的,有什么不对的地方还请大神们交流指正。
1、制作一个通用的事件处理模块(原生实现)
以下实现基于amd定义模块方式:
/** * 浏览器兼容事件处理组件 */ define(function () { var eventutil = { // 添加事件监听 addhandler: function (element, type, handler) { if (element.addeventlistener) { element.addeventlistener(type, handler, false);// dom2级事件 } else if (element.attachevent) { element.attachevent('on' + type, handler);// dom2级ie事件 } else { element['on' + type] = handler;// dom0级事件 } }, // 移除事件监听 removehandler: function (element, type, handler) { if (element.removeeventlistener) { element.removeeventlistener(type, handler, false); } else if (element.detachevent) { element.detachevent('on' + type, handler); } else { element['on' + type] = null; } }, // 获取事件对象 getevent: function (event) { return event ? event : window.event; }, // 获取事件的目标元素 gettarget: function (event) { return event.target || event.srcelement; }, // 禁止事件默认行为 preventdefault: function (event) { if (event.preventdefault) { event.preventdefault(); } else { event.returnvalue = false; } }, // 禁止事件冒泡 stoppropagation: function (event) { if (event.stoppropagation) { event.stoppropagation(); } else { event.cancelbubble = true; } } }; return eventutil; });
2、鼠标3击事件实现
鼠标点击事件涉及的事件及执行触发顺序:
mousedown:鼠标任意键按下时触发
mouseup:释放鼠标按钮时触发
click:单击
mousedown
mouseup
dblclick:双击
显然,click是依赖dblclick的,可以考虑根据这两个事件实现鼠标3次连续点击触发执行,设计触发dblclick后监听click事件,如果在短时间内触发了click事件,则构成鼠标连续点击3次的效果,具体实现如下源码:
<div> <button id="button">鼠标3击</button> </div>
js 代码
require(['eventutil'], function (eventutil) { var button = document.getelementbyid('button'); click3event(button, function (event) { console.log('3 click'); }); // 鼠标3击事件 function click3event(dom, fn) { var handler = function (event) { var event = eventutil.getevent(event), target = eventutil.gettarget(event); var handler = function (event) { var event = eventutil.getevent(event), target = eventutil.gettarget(event); eventutil.removehandler(target, 'click', handler); // 执行内容 fn(); }; eventutil.addhandler(target, 'click', handler); // 为防止双击后较长时间再次单击执行事件 settimeout(function () { eventutil.removehandler(target, 'click', handler); }, 300); }; eventutil.addhandler(dom, 'dblclick', handler); }
3、鼠标n击事件实现
由鼠标3击事件联想到,如果实现n次鼠标连击事件触发如何实现。想到的思路是:禁用目标对象的dblclick事件,只用click事件进行连续点击的逻辑判断和操作,在连续的短时间内满足点击n次即可触发执行,否则重新计算累加次数。具体的实现代码如下:
require(['eventutil'], function (eventutil) { var button = document.getelementbyid('button'); nclickevent(4, button, function (event, n) { console.log(n + ' click'); }); function nclickevent (n, dom, fn) { // 禁止双击事件 eventutil.removehandler(dom, 'dblclick', null); var n = parseint(n) < 1 ? 1 : parseint(n), count = 0, lasttime = 0; var handler = function (event) { var currenttime = new date().gettime(); count = (currenttime - lasttime < 300) ? count + 1 : 0; lasttime = new date().gettime(); if (count >= n - 1) { fn(event, n); count = 0; } }; eventutil.addhandler(dom, 'click', handler); } });
最后给大家分享一个jquery版的代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> </head> <body> <div id="box">234234234234234</div> <script src="js/jquery.min.js"></script> <script> (function(){ var num=0,d=null; $('#box').click(function(){ if(d){cleartimeout(d)} d=settimeout(function(){ num=0 },200); num++; if(num>=3){ alert(num+"\n ok") } }) })(); </script> </body> </html>
到此文章就结束了,大家可以根据需要选择自己想用的代码。