翼度科技»论坛 编程开发 JavaScript 查看内容

MoseEvent 中的几种坐标系

6

主题

6

帖子

18

积分

新手上路

Rank: 1

积分
18
本文主要内容:

  • screenX 和 screenY,
  • clientX 和 clientY / x 和 y
  • pageX 和 pageY
  • layerX 和 layerY
在处理鼠标事件(MouseEvent)时,了解不同的坐标系是非常重要的。常见的坐标系包括屏幕坐标(screen)、客户端坐标(client)、页面坐标(page)、图层坐标(layer),以及偏移坐标(offset)。这些坐标系各自有不同的用途,理解它们的区别有助于我们更精确地处理用户交互事件。本文将深入探讨这些坐标系的含义及其应用场景。
1. 屏幕坐标(Screen Coordinates)

屏幕坐标表示鼠标相对于整个屏幕的位置。无论网页在浏览器窗口中的位置如何,屏幕坐标始终相对于屏幕的左上角。它常用于需要了解鼠标在屏幕上绝对位置的场景,如跨屏幕的UI元素定位。
  1. // 获取屏幕坐标
  2. const screenX = event.screenX;
  3. const screenY = event.screenY;
复制代码
2. 客户端坐标(Client Coordinates)

客户端坐标是相对于浏览器窗口可视区域的坐标系,表示鼠标相对于浏览器窗口左上角的位置。客户端坐标不会受到页面滚动的影响,这使其非常适合用于描述事件在浏览器窗口内的位置,例如在处理窗口内的拖拽操作时。
  1. // 获取客户端坐标
  2. const clientX = event.clientX;
  3. const clientY = event.clientY;
复制代码
在某些情况下,x 和 y 属性也可用于获取客户端坐标,它们是 clientX 和 clientY 的简写形式。
3. 页面坐标(Page Coordinates)

页面坐标是相对于整个文档页面的坐标系。与客户端坐标不同,页面坐标会受到页面滚动的影响,表示鼠标在整个页面文档中的位置。它适用于需要考虑整个页面布局的场景,如定位页面中的特定元素。
  1. // 获取页面坐标
  2. const pageX = event.pageX;
  3. const pageY = event.pageY;
复制代码
4. 图层坐标与偏移坐标(Layer Coordinates & Offset Coordinates)

图层坐标(layerX 和 layerY)表示事件相对于事件触发元素的图层(可能是一个特定的 DOM 元素)的坐标。偏移坐标(offsetX 和 offsetY)则表示事件相对于事件目标元素内部的坐标。在现代浏览器中,这两者通常是相同的,因为 layerX 和 layerY 已逐渐被 offsetX 和 offsetY 取代。
  1. // 获取偏移坐标(等同于图层坐标)
  2. // offset 坐标是相对于 padding 开始的
  3. // 如果设置了 `box-sizing: border-box` 则 offset 坐标几乎等于 layer 坐标
  4. const offsetX = event.offsetX;
  5. const offsetY = event.offsetY;
复制代码
差异与使用建议


  • 参考系

    • screen 坐标是相对于整个屏幕的左上角。
    • client 坐标是相对于浏览器窗口的左上角。
    • page 坐标是相对于整个页面的左上角。
    • offset 坐标是相对于事件目标元素的左上角,通常等同于 layer 坐标。

  • 滚动影响

    • page 坐标会随着页面的滚动而变化。
    • screenclientoffset 坐标不会受到页面滚动的影响。

  • 图层交互

    • offset 坐标用于处理具有多个图层的网页元素,如弹出菜单或模态窗口,帮助确定事件发生的具体图层。
    • layer 坐标在早期用于同样的目的,但已逐渐被 offset 坐标取代。

  • 应用场景

    • screen 坐标适用于全屏UI元素定位。
    • client 坐标适用于窗口内事件定位。
    • page 坐标适用于全页面事件处理。
    • offset 坐标适用于处理复杂的图层结构。

结论

在处理鼠标事件时,选择合适的坐标系是关键。
screenX 和 screenY 适合用于绝对屏幕位置需求,
clientX 和 clientY 适合在窗口内进行定位,
pageX 和 pageY 适用于涉及页面滚动的情境,
而 offsetX 和 offsetY 则是处理复杂图层和嵌套结构的最佳选择。
在现代开发中,优先使用 offsetX 和 offsetY,因为它们已成为标准,能够更广泛地兼容各类浏览器。
通过了解这些坐标系的差异和应用场景,我们可以更精准地处理用户交互事件,从而提升用户体验。

来源:https://www.cnblogs.com/guojikun/p/18361122
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具