screenX/Y, clientX/Y和pageX/Y之间有什么区别?
同样，对于iPad Safari，计算是否与桌面相似-或者因为视口而有一些不同?
如果你能给我举个例子就太好了。
当前回答
在JavaScript中:
pageX, pageY, screenX, screenY, clientX，和clientY返回一个数字，该数字表示事件点从参考点的逻辑“CSS像素”的数量。事件点是用户单击的位置，而参考点是左上角的一个点。这些属性返回事件点到该参考点的水平和垂直距离。
pageX和pageY: 相对于浏览器中完全呈现的内容区域的左上角。这个参考点在左上角的URL栏和后退按钮下面。这个点可以在浏览器窗口的任何地方，如果页面中嵌入了可滚动的页面，并且用户移动了滚动条，这个点实际上可以改变位置。
screenX和screenY: 相对于物理屏幕/显示器的左上角，只有当您增加或减少显示器数量或显示器分辨率时，这个参考点才会移动。
clientX和clientY: 相对于浏览器窗口的内容区域(视口)的左上角边缘。即使用户从浏览器中移动滚动条，该点也不会移动。
要查看哪些浏览器支持哪些属性:
http://www.quirksmode.org/dom/w3c_cssom.html#t03
< >脚本 函数showCoordinates(事件){ var x = event.clientX; var y = event.clientY; alert(' X坐标:${X}， Y坐标:${Y} '); ｝ > < /脚本 < p onmousedown = " showCoordinates(事件)" > 单击这个段落，一个警告框将显示x 以及鼠标相对于视口的y坐标 < / p >
其他回答
与offsetX/Y的比较
其他有趣的属性是offsetX/Y(鼠标与所单击元素/节点的边界之间的偏移量)。以下是更全面的情况:
源
帮助我的是直接在这个页面上添加一个事件，然后自己点击!在开发人员工具/Firebug等中打开控制台，粘贴以下内容:
文档。addEventListener('点击'，函数(e) { console.log ( 'page: ' + e.pageX + '，' + e.pageY， ' '客户端:' + e.clientX + '，' + e.clientY， ' 'screen: ' + e.screenX + '，' + e.screenY ') },假); 点击任何地方
使用这个代码片段，您可以在滚动、移动浏览器窗口等过程中跟踪您的单击位置。
请注意，当您一直滚动到顶部时，pageX/Y和clientX/Y是相同的!
这里有一张图片解释了pageY和client和screenY之间的区别。
pageX、clientX和screenX也一样。
pageX/Y坐标相对于整个渲染页面的左上角(包括通过滚动隐藏的部分)，
而clientX/Y坐标相对于页面可见部分的左上角，通过浏览器窗口“看到”。
屏幕x /Y相对于物理屏幕。
看到演示
或者试试这个片段:
document.addEventListener('DOMContentLoaded', _ => { const info = document.getElementById('info'); const updateInfo = event => { const { clientX, clientY, pageX, pageY } = event; info.innerHTML = `clientX: ${clientX} clientY: ${clientY}<br /> pageX: ${pageX} pageY: ${pageY}`; }; document.addEventListener('mouseover', updateInfo); document.addEventListener('mousemove', updateInfo); }); body { border: 1px solid red; min-height: 10000px; margin: 10px; } #info { border: 1px solid blue; position: fixed; top: 80px; left: 40px; } <h3>Move the mouse around and scroll to see the values of clientX/Y and pageX/Y</h3> <div id="info"></div>
注意:你可能永远不需要screenX/Y
pageX/Y给出了相对于<html>元素的CSS像素坐标。 clientX/Y给出了相对于视口的CSS像素坐标。 screenX/Y以设备像素为单位给出相对于屏幕的坐标。
关于你的最后一个问题，桌面浏览器和移动浏览器的计算是否相似……为了更好地理解移动浏览器，我们需要区分两个新概念:布局视口和可视视口。可视视口是当前显示在屏幕上的页面的一部分。布局视口是桌面浏览器上呈现的完整页面的同义词(包含当前视口中不可见的所有元素)。
在移动浏览器上，pageX和pageY仍然相对于页面的CSS像素，因此您可以获得相对于文档页面的鼠标坐标。另一方面，clientX和clienti定义了与可视视口相关的鼠标坐标。
这里有另一个stackoverflow线程关于视觉视口和布局视口之间的差异:视觉视口和布局视口之间的差异?
另一个很好的资源:http://www.quirksmode.org/mobile/viewports2.html
我不喜欢也不理解那些可以用语言直观地解释的东西。
推荐文章
- 如何使用Jest测试对象键和值是否相等?
- 将长模板文字行换行为多行，而无需在字符串中创建新行
- 如何在JavaScript中映射/减少/过滤一个集?
- Bower: ENOGIT Git未安装或不在PATH中
- 添加javascript选项选择
- 为iPad和iPhone设计输入按钮
- 在Node.js中克隆对象
- 为什么在JavaScript的Date构造函数中month参数的范围从0到11 ?
- 使用JavaScript更改URL参数并指定默认值
- 在window.setTimeout()发生之前取消/终止
- 如何删除未定义和空值从一个对象使用lodash?
- 检测当用户滚动到底部的div与jQuery
- 在JavaScript中检查字符串包含另一个子字符串的最快方法?
- 检测视口方向，如果方向是纵向显示警告消息通知用户的指示
- ASP。NET MVC 3 Razor:在head标签中包含JavaScript文件
