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

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)