Javascript 用于替换event.layerX和event.layerY的跨浏览器解决方案

我正在尝试改编一个简单应用程序中的一些代码，该应用程序使用Raphael允许用户在画布上绘制圆形和矩形。（原始代码位于）

原始代码使用了较旧版本的jQuery，运行良好。看

然而，使用jQuery的更新版本打破了这个例子。看

原因是新版本的jQuery中不再定义

event.layerX

和

event.layerY

。我的问题是-我可以使用什么代码来替换这些值？我通过做一些数学运算尝试了一些事情（event.originalEvent.layerX/layerX现在仍然存在，所以我只是尝试添加/减去一些会产生这些值的东西），但到目前为止，在一个浏览器上工作的东西并不能在所有浏览器上工作

---

很抱歉，如果以前有人问过这个问题，但我无法找到关于堆栈溢出或其他任何地方的具体答案。

因此，我考虑了一下这个问题，因为Chrome团队出于奇怪的原因想要删除layerX和layerY

首先，我们需要您的集装箱位置：

var position = $paper.offset();

（对于未打开小提琴的读者，$paper是绘制svg的div）

它提供了两个坐标，

position.top

和

position.left

，因此我们知道容器在页面中的位置

然后，单击，我们使用

e.pageX

和

e.pageY

，这是页面的坐标。为了模拟layerX和layerY，我们使用

（e.pageX-position.left）

和

（e.pageY-position.top）

等等：

---

适用于chrome、Safari、FF和Opera。

欢迎来到图书馆依赖的乐趣。您可以继续使用较旧的jQuery（为什么要升级？），或者了解层在较旧版本中是如何实现的，然后在较新版本中重新实现它们。我不明白您为什么不使用原始事件，它工作正常：@RobG-我需要一个更新版本的jQuery，用于我的项目的其他元素。@mdi-仍然抛出以下警告：“event.layerX和event.layerY在WebKit中已损坏且不推荐使用。这似乎不是一个很好的长期解决方案。我有点怀疑Chrome团队是否会抛弃layerX和layerY，因为Mozilla团队似乎不想要它，但是的，这可能是一个问题：）是的，这是可行的。我得出了类似的解决方案。一件奇怪的事情是，虽然在我发布的示例中效果很好，但在我正在开发的应用程序中，当使用Chrome时，X和Y都有1个像素的差异。没什么大不了的，还有一些其他属性，我可以添加到等式中，使所有浏览器中的一切都等于originalEvent.layerX/layerY。因此，不确定这是否是最好的方法，但它似乎有效……虽然此代码可能会回答此问题，但提供有关此代码为什么和/或如何回答此问题的附加上下文可提高其长期价值。

const bbox = e.target.getBoundingClientRect();
const x = e.clientX - bbox.left;
const y = e.clientY - bbox.top;