如何获取元素的 clientX 和 clientY（如鼠标事件）答案

【问题标题】：How to get element's clientX and clientY (like a mouse event)如何获取元素的 clientX 和 clientY（如鼠标事件）
【发布时间】：2022-02-04 07:16:28
【问题描述】：

是否可以使用 DOM API 将 pageX, pageY 转换为 clientX, clientY？

我有一个元素需要找到clientX 和clientY。我可以使用 jQuery 的 offset 方法轻松获得 pageX 和 pageY，但我有兴趣获得 clientX 和 clientY。不涉及鼠标事件。

【问题讨论】：

标签： javascript html dom

【解决方案1】：

var element = document.getElementById(...);
var clientRect = element.getBoundingClientRect();
var clientX = clientRect.left;
var clientY = clientRect.top;

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

参考：https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

【讨论】：

【解决方案2】：

你可以通过这个公式找到ClientX、ClientY

  var clientX = pageX- document.documentElement.scrollLeft;
  var clientY = pageY- document.documentElement.scrollTop;

下图显示页面 x/y 和客户端 x/y 是如何相互关联的

【讨论】：