鼠标点击事件流

总结一下鼠标从按下触发的事件，和事件的冒泡情况。

事件类型：mousedown(按下),mousemove(移动),mouseup(抬起),click(单击),dblclick(双击),contextmenu(右键菜单),mouseover(进入元素),mouseout(离开元素),mouseenter(类似mouseover,但是不冒泡),mouseleave(类似mouseout，但是不冒泡)。

移动端不支持dblclick，因为移动端双击页面是放大效果。单手触发的是mosuemove事件。

冒泡情况：除了mouseleave,mouseenter，其他事件都冒泡。

事件顺序：

click事件：mousedown-mouseup-cick

右键click事件：

safari:mousedown-contextmenu

Firefox:mousedown-contextmenu-mouseup

chrome:mousedown-contextmenu-mouseleave-mouseout

IE:mousemove-mousedown-mouseup-contextmenu-mouseleave

dblclick事件：mousedown-mouseup-click-mousedown-mouseup-click-dblclick

大家可以写一个小的demo，看一下鼠标在父子元素间移入移出的事件顺序，这里我只说下，就不贴代码了。

父元素进入子元素：父元素的mouseout，子元素的mouseenter，子元素的mouseover，父元素的mouseover，子元素的mousemove，父元素的mousemove

可以看出来不触发父元素的mouseleave事件。

子元素进入父元素：子元素的mouseleave，子元素的mouseout，父元素的mouseout，父元素的mouseover，父元素的mousemove

可以看出不触发父元素的mouseenter事件。

事件对象：

都支持clientX/Y,screenX/Y,pageX/Y,offsetX/Y,但是X/Y,layerX/Y有兼容性问题，目前IE10及其以上和其他浏览器都不支持这两个属性。

但是IE7-的起点不是（0，0），而是（2，2）。