浏览器点击屏幕事件触发顺序

1>PC端鼠标事件

click:点击鼠标左键时触发                                                                                                                                                

dblclick:双击鼠标左键时触发

mousedown:鼠标按钮被按下(左键或右键)时触发

mouseup:鼠标按钮被释放弹起时触发

mouseover:在鼠标指针位于一个元素外部首次移入另一个元素边界之内时触发

mouseout:在鼠标指针位于一个元素上方,然后移入另一个元素时触发(可能是移入另一个元素或者前一个元素的外部)

mouseenter:鼠标移入元素范围内触发,该事件不冒泡,即鼠标移至其后代元素上时不触发

mouseleave:鼠标移出元素范围时触发,该事件不冒泡,即鼠标移至其后代元素上时不触发

mousemove:鼠标在元素内部移动时不断触发

2>触发顺序

在一个元素上相继触发mousedown和mouseup事件才会触发click事件,两次click事件相继触发才会触发dblclick事件

如果mousedown和mouseup事件中的一个取消就不会触发click事件

mousedown

mouseup

click

mousedown

mouseup

click

dblclick

3>button属性

DOM的button属性有3个值0表示鼠标左键,1表示鼠标滚轮按钮,2表示鼠标右键

IE8及之前版本也提供button,但是与DOM的button差距很大,它提供了9个值

oDiv.onmousedown=function(e){
	oDiv.style.backgroundColor="yellow";
	console.log(e.button);//0
}

4>click和dblclick的冲突问题

解决方法:可以使用延迟,利用setTimeout()来延迟完成click事件的处理,然后在需要屏蔽click的时候用clearTimeout()来停止

var timer=null;
oDiv.addEventListener("click",function(e){
	clearTimeout(timer);
	timer=setTimeout(function(){
		console.log(1);
		oDiv.style.backgroundColor="yellow";
	},300)
},false)
oDiv.addEventListener("dblclick",function(e){
	clearTimeout(timer);
	console.log(2);
	oDiv.style.backgroundColor="green";
},false)

 

没有更多推荐了,返回首页