pageX, clientX ,screenX, offsetX, layerX, ,x的区别

事件对象event的位置属性,这些参数比较容易混淆

1. pageX,pageY :IE不识别的,鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化,其实就是clientY+scrollTop,参考点是页面

2. clientX ,clientY: 鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化. 这是一个变化的,是以浏

          览器左上角为参考点

3. screenX, screenY : 鼠标相对于屏幕的位置,跟浏览器没有关系,不管浏览器多大,是以计算机屏幕为参考点的

4. offsetX,offsetY : FF不识别的,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值,是以event对象为参考点

5. layerX,layerY : IE不识别的,如果event元素没有相对定位和绝对定位的话,相当于pageX,pageY,如果有定位属性的话,相当于border+offsetX,

6. x,y: FF不识别的,IE是相等于offsetX,chrome相等于clientX

原文地址:https://www.cnblogs.com/xiaohui108/p/4223609.html