javascript的一些坐标位置属性

最新推荐文章于 2024-06-27 22:37:30 发布

yangsp1

最新推荐文章于 2024-06-27 22:37:30 发布

阅读量143

点赞数

分类专栏： js 文章标签： JavaScript IE Safari Opera Firefox ViewUI

本文链接：https://blog.csdn.net/yangsp1/article/details/83437506

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细解释了不同浏览器下鼠标事件的坐标系统，包括offsetX/offsetY、pageX/pageY等属性的区别及应用。探讨了各属性在不同浏览器中的表现，并推荐了在JavaScript开发中最实用的坐标属性。

摘要由CSDN通过智能技术生成

参考另一：[url]http://www.cnblogs.com/rainman/archive/2009/02/15/1391056.html[/url]

offsetX/offsetY：相对于当前元素的位移
x/y：相对于当前座标系的位移，但是IE常常搞错当前座标系
layerX/layerY：相对于当前座标系的位移
pageX/pageY：相对于网页的位移
clientX/clientY：相对于可视窗口的位移
screenX/screenY：相对于屏幕的位移

offsetX/offsetY：W3C- IE+ Firefox- Opera+ Safari+
x/y：W3C- IE+ Firefox- Opera+ Safari+
layerX/layerY：W3C- IE- Firefox+ Opera- Safari+
pageX/pageY：W3C- IE- Firefox+ Opera+ Safari+
clientX/clientY：W3C+ IE+ Firefox+ Opera+ Safari+
screenX/screenY：W3C+ IE+ Firefox+ Opera+ Safari+

六对属性只有clientX/clientY和screenX/screenY是W3C规范内的。
而 offsetX/offsetY和pageX/pageY知其一组即可通过计算取得另一组，对于JS开发者而言，Firefox/Opera /Safari提供的pageX/pageY更加实用。x/y和layerX/layerY本应该是作用相同、名称不同的两组属性，即相对于 offsetParent对象的位移，但是IE对offsetParent的判断却相当不准确，大部份情况下offsetParent对象都等于body 对象，最严重的后果就是在一个绝对定位的层中offsetParent对象本应该为层对象，可IE却依旧为body对象，导致座标系混乱，而Opera和 Safari中的x/y则同样继承了IE中的错误，因此x/y属性能不用则不用。[color=darkred][/color][/color][size=large][/size]