基本介绍
有些交互会需要获取点击或者触摸事件发生的位置,js 提供了多种相关属性,下面介绍了不同的属性之间的差异。
clientX&clientY
设置或获取鼠标指针位置相对于当前窗口的 x/y 坐标,其中客户区域不包括窗口自身的控件和滚动条。 (可见区域)
offsetX&offsetY
设置或获取鼠标指针位置相对于触发事件的对象的 x/y 坐标。 (触发事件的元素,ie,chrome支持此属性,ff不支持)
screenX&screenY
设置或获取获取鼠标指针位置相对于用户屏幕的 x/y 坐标。(用户屏幕左上角)
x&y
设置或获取鼠标指针位置相对于父文档的 x/y 像素坐标(亦即相对于当前窗口)。(ff不支持)
layerX&laylerY
- 只读属性,返回相对于当前图层的事件的水平坐标。
- 该属性将页面滚动考虑进来,并返回一个相对于整个文档的值。
- 如果事件发生在定位元素内部,其中返回的值是相对于定位元素的左上角。
pageX&pageY
- 兼容性不好,不建议使用
- 一个整数值,以像素为单位,指示事件发生时鼠标指针所在的x/y坐标。无论文档的当前水平滚动偏移量如何,该值都是相对于整个文档的左边缘。