screenX/Y, clientX/Y和pageX/Y之间有什么区别?
同样，对于iPad Safari，计算是否与桌面相似-或者因为视口而有一些不同?
如果你能给我举个例子就太好了。
当前回答
帮助我的是直接在这个页面上添加一个事件，然后自己点击!在开发人员工具/Firebug等中打开控制台，粘贴以下内容:
文档。addEventListener('点击'，函数(e) { console.log ( 'page: ' + e.pageX + '，' + e.pageY， ' '客户端:' + e.clientX + '，' + e.clientY， ' 'screen: ' + e.screenX + '，' + e.screenY ') },假); 点击任何地方
使用这个代码片段，您可以在滚动、移动浏览器窗口等过程中跟踪您的单击位置。
请注意，当您一直滚动到顶部时，pageX/Y和clientX/Y是相同的!
其他回答
两者之间的差异很大程度上取决于您当前引用的浏览器。每个程序都以不同的方式实现这些属性，或者根本不实现。Quirksmode提供了大量关于浏览器与W3C标准(如DOM和JavaScript Events)差异的文档。
pageX/Y给出了相对于<html>元素的CSS像素坐标。 clientX/Y给出了相对于视口的CSS像素坐标。 screenX/Y以设备像素为单位给出相对于屏幕的坐标。
关于你的最后一个问题，桌面浏览器和移动浏览器的计算是否相似……为了更好地理解移动浏览器，我们需要区分两个新概念:布局视口和可视视口。可视视口是当前显示在屏幕上的页面的一部分。布局视口是桌面浏览器上呈现的完整页面的同义词(包含当前视口中不可见的所有元素)。
在移动浏览器上，pageX和pageY仍然相对于页面的CSS像素，因此您可以获得相对于文档页面的鼠标坐标。另一方面，clientX和clienti定义了与可视视口相关的鼠标坐标。
这里有另一个stackoverflow线程关于视觉视口和布局视口之间的差异:视觉视口和布局视口之间的差异?
另一个很好的资源:http://www.quirksmode.org/mobile/viewports2.html
与offsetX/Y的比较
其他有趣的属性是offsetX/Y(鼠标与所单击元素/节点的边界之间的偏移量)。以下是更全面的情况:
源
clientX/Y指的是相对屏幕坐标，例如，如果你的网页足够长，那么clientX/Y给出了点击点的坐标位置，根据其实际像素位置，而ScreenX/Y给出了参考页面开始的纵坐标。
我不喜欢也不理解那些可以用语言直观地解释的东西。
推荐文章
- 如何在Typescript中解析JSON字符串
- Javascript reduce()在对象
- 在angularJS中& vs @和=的区别是什么
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- JavaScript中的querySelector和querySelectorAll vs getElementsByClassName和getElementById
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中，'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
- [].slice的解释。调用javascript?
