【面试篇】event对象中offsetX,clientX,pageX,screenX,layerX,X的辨析

  • offsetX,offsetY:指鼠标指针相对于触发事件元素的左上角的偏移,在Chrome,Opera,Safari中指外边缘,即将该元素边框的宽度计算在内,firefox则不包含边框值,如下图所示:

《【面试篇】event对象中offsetX,clientX,pageX,screenX,layerX,X的辨析》

  • pageX和pageY是相对文档窗口左上角的距离,不会随滚动条移动

  • clientX和clientY是相对于浏览器可视窗口左上角的距离,参照点会随滚动条滚动而移动

当可视窗口和文档窗口重叠时,pageX和clientX相等

《【面试篇】event对象中offsetX,clientX,pageX,screenX,layerX,X的辨析》

当缩小可视窗口致使浏览器出现滚动条时,clientX<pageX

《【面试篇】event对象中offsetX,clientX,pageX,screenX,layerX,X的辨析》

  • screenX和screenY:鼠标位置相对于用户屏幕左上角的距离

  • layerX和layerY:FF特有,当触发元素没有设置绝对定位或相对定位,则以页面为参考点,如果设置了,则以触发盒子的左上角为参考点(包含border)

  • X和Y:IE特有,由于IE坐标选择十分混乱,故尽量不要使用

    原文作者:张爱玲
    原文地址: https://segmentfault.com/a/1190000008824028
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞