js鼠标事件相关知识

1.mousedown->mouseup依次触发后相当于click事件

2.除了mouseenter和mouseleave外，其它的鼠标事件都是冒泡的

3.mouseover和mouseout事件的event对象有一个relatedTarget属性（相关元素）mouseover时relatedTarget为失去光标的元素，mouseout相反。ie8及更早的浏览器不支持该属性，但为mouseover提供了fromElement属性，为mouseout提供了toElement属性来达到相同的目的

4.发生鼠标事件时如果按了Ctrl、Shift、Alt和Meta(windows中是windows键，mac是cmd键)，可以用event.shiftKey,event.ctrlKey等属性来判断，为true表示键被按下了

5.发生click事件时,可以用event.buttom来判断按的是哪个键，ie8及之前的版本跟标准dom的实现不一样，要做兼容性判断。

标准dom	ie8及更早
左键-0	左键-1
中键-1	中键-4
右键-2	右键-2

 

两者都有button属性，所以不能用能力检测(即判断是否有event.buttom属性)，得使用document.implementation.hasFeature("MouseEvents","2.0")判断，true表示是标准dom，否则为1e8-

6.鼠标滚轮事件

除firefox外，其它所有的浏览器(包括ie6)都采用mousewheel事件，firefox采用DOMMouseScroll事件;

mousewheel的event.wheelDelta可判断鼠标滚轮的方向，如果是120则表示向上滚动，-120则表示向下滚动;

DOMMouseScroll则采用event.detail来判断鼠标滚轮方向，-3表示向上滚动,3表示向下滚动;

若要做兼容处理，可采用能力检测方式(判断是否支持event.wheelDelta)

 7.鼠标位置

clientX和clientY

鼠标点击位置相对于浏览器（可视区）的坐标（0,0），计算鼠标点击位置距离其左上角的位置，不管浏览器窗口大小如何变化，都不会影响点击位置的坐标

pageX和pageY

鼠标点击位置相对于页面的位置，通常浏览器窗口没有出现滚动条时，该属性和event.clientX及event.clientY是等价的，但是当浏览器出现滚动条的时候，pageX通常会大于clientX

screenX和screenY

鼠标点击位置相对于屏幕的坐标

offsetX和offsetY

鼠标点击位置相对于容器左上角为起点的坐标，唯独Firefox不支持该属性，Firefox中与此属性相对应的概念是，event.layerX和event.layerY