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

jemygraw 发布于2019-08-22 15:56 / 3096人阅读

摘要：意为偏移量，是被点击的元素距左上角为参考原点的长度，而和的参考点有所差异。下，是包含边框的，如图所示。而是不包含边框的，如果鼠标进入到区域，为返回负值，如图所示。

offsetX,offsetY

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

Chrome下，offsetX offsetY是包含边框的，如图所示。

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

clientX，clientY

设置或获取鼠标指针位置相对于浏览器视口（内容区域的左上角）的坐标，与浏览器是否有滚动条无关
相对于页面的可见部分的左上角，通过浏览器窗口“看到”。

screenX，screenY

鼠标指针位置相对于设备屏幕的左上角的坐标，如果在chrome
devtool以手机模式查看页面，获取的还是相对于整个电脑屏幕的左上角的坐标

pageX，pageY

相对于浏览器中完全呈现的内容区域的左上角，此参考点位于左上方的网址栏和后退按钮下方。如果在页面中嵌入可嵌入的可滚动页面，并且用户移动滚动条，则可以实际改变位置。
坐标相对于整个渲染页面的左上角（包括滚动隐藏的部分）

pageX与clientX的区别

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

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

测试代码：

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);

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

云服务器 GPU云服务器公分和厘米有什么区别空间和vps有什么区别托管和租赁机柜有什么区别 html和css有什么区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93887.html

JS基础篇--了解JS的clientX、pageX、screenX等方法来获取鼠标坐标详解

摘要：相对浏览器窗口简单代码即可实现，然而这是还不够，因为绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标，的，属性分别表示鼠标点击位置相对于文档的左边距，上边距。在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取做一些简单的总结，没特殊声明代码在IE8...

phodal 2019-08-21 10:23 评论0 收藏0
js dom操作 pageX,pageY,offsetX,offsetY,clientX/Y,scr

摘要：什么是，文档对象模型。是万维网联盟的标准，定义了访问和文档的标准。在的标准中，是独于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容结构和样式。获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变。什么是DOM? DOM，文档对象模型（Document Object Model）。DOM是 W3C（万维网联盟）的标准，DOM定义了访问HTML和XML文档的标准。...

toddmark 2019-08-23 12:00 评论0 收藏0
Javascript中常用宽高和坐标属性

摘要：是一个只读的属性，元素的内容高度宽度，包括由于属性而不可见的部分。一个只读属性，返回一个指向最近的包含该元素的定位元素。很有用，因为和都是相对于其内边距边界的。它包括内部的宽度和高度和，但不包括滚动条和。 1.scrollHeight/Width scrollHeight/Width是一个只读的属性，元素的内容高度/宽度，包括由于overflow属性而不可见的部分。不能直接从css中得...

wuyangnju 2019-08-20 10:37 评论0 收藏0
JavaScript 事件详解

摘要：事件监听函数标准的事件监听函数如下上面的示例表示先获得表示节点的对象，然后在这个对象上面添加了一个事件监听器，当监听到事件发生时，则调用回调函数，即在控制台输出。 JavaScript 事件解读 1. 事件基本概念事件是指在文档或者浏览器中发生的一些特定交互瞬间，比如打开某一个网页，浏览器加载完成后会触发 load 事件，当鼠标悬浮于某一个元素上时会触发 hover 事件，当鼠标点击...

Object 2019-08-19 18:12 评论0 收藏0
[譯 + 補充]理解 DOM 座標

摘要：相對於座標在可視區的最左上角。滑鼠座標通常透過事件取得。再次強調不幸的是沒有屬性可以直接取得元素對應的座標。觸發事件的元素相對於父容器定位元素的座標，從開始計算。上個座標與當前的座標移動距離。座標系統在瀏覽器中有兩種座標系統 & 滑鼠座標： 1. 相對於 `document` - 座標 (0, 0) 在整個頁面的最左上角。 2. 相對於 `window` - 座標 (0, 0) 在...

Lionad-Morotar 2019-08-21 15:09 评论0 收藏0