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)