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

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

【面试篇】event对象中offsetX,clientX,pageX,screenX,layerX,X的辨析_第1张图片

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

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

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

【面试篇】event对象中offsetX,clientX,pageX,screenX,layerX,X的辨析_第2张图片

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

【面试篇】event对象中offsetX,clientX,pageX,screenX,layerX,X的辨析_第3张图片

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

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

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

你可能感兴趣的:(坐标,css)