screenX/Y，clientX/Y，offsetX/Y和pageX/Y之间有什么区别?

2019年8月24日 224次阅读 来源: 黄志强

offsetX,offsetY

offset意为偏移量，是被点击的元素距左上角为参考原点的长度，而IE、FF和Chrome的参考点有所差别。

Chrome下，offsetX offsetY是包含边框的，如图所示。
《screenX/Y，clientX/Y，offsetX/Y和pageX/Y之间有什么区别?》

而IE、FF是不包含边框的，假如鼠标进入到border地区，为返回负值，如图所示。

《screenX/Y，clientX/Y，offsetX/Y和pageX/Y之间有什么区别?》

clientX，clientY

设置或猎取鼠标指针位置相对于浏览器视口（内容地区的左上角）的坐标，与浏览器是不是有转动条无关
相对于页面的可见部份的左上角，经由过程浏览器窗口“看到”。

screenX，screenY

鼠标指针位置相对于装备屏幕的左上角的坐标，假如在chrome
devtool以手机形式检察页面，猎取的照样相对于全部电脑屏幕的左上角的坐标

pageX，pageY

相对于浏览器中完全显现的内容地区的左上角，此参考点位于左上方的网址栏和退却按钮下方。假如在页面中嵌入可嵌入的可转动页面，而且用户挪动转动条，则能够现实转变位置。
坐标相对于全部衬着页面的左上角（包含转动隐蔽的部份）

  • pageX与clientX的辨别

《screenX/Y，clientX/Y，offsetX/Y和pageX/Y之间有什么区别?》

也就是说，当浏览器没有转动条的时刻，pageX和clientX是一样的

以上除了screenX/Y以装备像素为单元，其他都是以css像素为单元

测试代码：

<pre style="overflow: auto; font-family: &quot;Input Mono&quot;, &quot;PT Mono&quot;, Consolas, Monaco, Menlo, monospace; font-size: 14px; margin: 0px; padding: 10px; color: rgb(204, 204, 204); background: rgb(45, 45, 45); line-height: 1.6; border-radius: 3px; border: none; width: 380.661px;">document.addEventListener('click', function(e) {
  console.log(
    'page: ' + e.pageX + ',' + e.pageY,
    'client: ' + e.clientX + ',' + e.clientY,
    'screen: ' + e.screenX + ',' + e.screenY,
    'offset: ' + e.offsetX+ ',' + e.offsetY)
}, false);
</pre>

参考文章：
1.screenX / Y，clientX / Y和pageX / Y之间有什么辨别? | icessun’s Blog
2.辨别event对象中的clientX,offsetX,screenX,pageX

    原文作者：黄志强
    原文地址: https://segmentfault.com/a/1190000014116777
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞