js 获取事件位置

基本介绍

有些交互会需要获取点击或者触摸事件发生的位置,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坐标。无论文档的当前水平滚动偏移量如何,该值都是相对于整个文档的左边缘。
------------- 本文结束 感谢您的阅读 -------------

本文标题:js 获取事件位置

文章作者:水中熊

发布时间:2018年06月12日 - 20:06

最后更新:2018年06月12日 - 21:06

原始链接:https://shuizhongxiong.github.io/js-getEventPosition.html

许可协议: 知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。 转载请保留原文链接及作者。

🌹坚持原创技术分享,您的支持将鼓励我继续创作!🌹
0%