js事件对象Event获取pageX,clientX,screenX,offsetX,layerX的方式与区别

pageX:

鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,同一个元素坐标不随滑动条移动而变化

clientX:

鼠标在页面上可视区域的位置,即是以浏览器滑动条此刻的滑动到的位置为参考点,同一个元素坐标随滑动条移动而变化.

注：
1、如果元素位于body中，e.clientX + document.body.scrollLeft - document.body.clientLeft = e.pageX，

2、e.clientX包括了body的边框，document.body.scrollLeft也包括了body边框，body表框运算重复，减去document.body.clientLeft，即去掉重复的body边框

screenX:

获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动或浏览器移动而改变

offsetX：

获取到的是鼠标触发点相对于目标事件元素(被触发DOM)左上角的距离(确切的说是到边框外边界的距离)，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。

layerX：

获取到的是鼠标触发点相对于offsetParent元素左上角的距离(确切的说是到边框外边界的距离)，包括中间所有元素的padding、margin、border及元素宽度值之和)，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。

注：关于offsetParent元素

1、如果当前元素的祖先元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

2、如果当前元素的祖先元素(包括当前元素)中有CSS定位（position为absolute或relative），offsetParent取最近的那个祖先元素(包括当前元素)。

总结：

1、使用pageX获取带滚动条的到页面边缘尺寸

2、使用clientX获取到浏览器可是区域的尺寸，没有滚动条，pageX == clientX

3、使用screenX获取到屏幕边缘尺寸

4、使用offsetX获取到当前元素边缘尺寸

5、使用layerX获取到offsetParent边缘尺寸