JS鼠标3次点击事件实现代码及扩展思路

2023-09-24 20:17:05 194

这几天看了一下JavaScript高级程序设计中的Dom事件相关内容，同时看到网上有关鼠标多次点击事件，鼠标事件是简单、常用的事件之一，于是便针对点击事件进行一些小的扩展和实现，增强对Dom事件的进一步理解。其中的实现和思路是自己总结的，有什么不对的地方还请大神们交流指正。

1、制作一个通用的事件处理模块（原生实现）

以下实现基于AMD定义模块方式：

/**
*浏览器兼容事件处理组件
*/
define(function(){
varEventUtil={
//添加事件监听
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);//DOM2级事件
}elseif(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);
}elseif(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
},
//获取事件对象
getEvent:function(event){
returnevent?event:window.event;
},
//获取事件的目标元素
getTarget:function(event){
returnevent.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;
}
}
};

returnEventUtil;
});

2、鼠标3击事件实现

鼠标点击事件涉及的事件及执行触发顺序：

mousedown：鼠标任意键按下时触发

mouseup：释放鼠标按钮时触发

click：单击

mousedown

mouseup

dblclick：双击

显然，click是依赖dblclick的，可以考虑根据这两个事件实现鼠标3次连续点击触发执行，设计触发dblclick后监听click事件，如果在短时间内触发了click事件，则构成鼠标连续点击3次的效果，具体实现如下源码：


鼠标3击

js代码

require(['eventUtil'],function(EventUtil){
varbutton=document.getElementById('button');

click3Event(button,function(event){
console.log('3click');
});

//鼠标3击事件
functionclick3Event(dom,fn){
varhandler=function(event){
varevent=EventUtil.getEvent(event),
target=EventUtil.getTarget(event);

varhandler=function(event){
varevent=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){
varbutton=document.getElementById('button');

nclickEvent(4,button,function(event,n){
console.log(n+'click');
});


functionnclickEvent(n,dom,fn){
//禁止双击事件
EventUtil.removeHandler(dom,'dblclick',null);

varn=parseInt(n)<1?1:parseInt(n),
count=0,
lastTime=0;

varhandler=function(event){
varcurrentTime=newDate().getTime();

count=(currentTime-lastTime<300)?count+1:0;

lastTime=newDate().getTime();

if(count>=n-1){
fn(event,n);
count=0;
}
};

EventUtil.addHandler(dom,'click',handler);
}
});

最后给大家分享一个jquery版的代码




	
	Document


234234234234234

到此文章就结束了，大家可以根据需要选择自己想用的代码。

JS鼠标3次点击事件实现代码及扩展思路

热门推荐

随机推荐