跨浏览器解决方案：替换事件.layerX和event.layerY的使用

Question

我正在尝试修改一个使用Raphael的简单应用程序中的代码，以允许用户在画布上绘制圆形和矩形。 （原始代码位于 https://gist.github.com/673186）

原始代码使用了较旧版本的jQuery并正常工作。 请参见http://jsfiddle.net/GHZSd/

然而，使用更新的版本的jQuery会破坏示例。 请参见http://jsfiddle.net/GHZSd/1/

原因是在新版本的jQuery中不再定义event.layerX和event.layerY。 我的问题是 - 我可以使用哪些代码来替换这些值？ 我已经尝试了一些数学计算（目前仍存在event.originalEvent.layerX / layerX，因此我只是尝试添加/减去一些将导致这些值的内容），但到目前为止，在一个浏览器上起作用的东西并不适用于所有浏览器。

如果以前有人问过这个问题，对不起，但我无法在Stack Overflow或其他任何地方找到具体答案。

- zeke

---

欢迎进入库依赖的乐趣。你可以继续使用旧版本的jQuery（为什么要升级呢？），或者找出旧版本中图层是如何实现的，并在新版本中重新实现它们。 - RobG

我不明白为什么你不使用原始事件，它可以正常工作：http://jsfiddle.net/GHZSd/19/ - mddw

@RobG - 我需要一个更新的jQuery版本来处理我项目中的其他元素。 - zeke

@mdi - 这仍然会引发以下警告：'event.layerX和event.layerY在WebKit中已经失效并被弃用。它们将在不久的将来从引擎中删除。' 看起来不是一个很好的长期解决方案。 - zeke

我有点怀疑Chrome团队会放弃layerX和layerY，因为Mozilla团队似乎不想要它，但是是的，这可能是一个问题 :) - mddw

Answer 1

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

首先，我们需要获取您容器的位置：

var position = $paper.offset();

(如果没有打开fiddle的话，$paper是svg将要绘制的div)

它给了我们两个坐标，position.top 和 position.left，这样我们就知道容器在页面中的位置。

然后，在单击事件上，我们使用 e.pageX 和 e.pageY，它们是页面上的坐标。为了模拟 layerX 和 layerY，我们使用 (e.pageX - position.left) 和 (e.pageY - position.top)

Et voilà : http://jsfiddle.net/GHZSd/30/

适用于Chrome、Safari、Firefox和Opera。

- mddw

---

没错，那个方法可行。我也想到了类似的解决方案。但有一件奇怪的事情是，在我正在开发的应用程序中，使用Chrome时X和Y都会有1像素的差异。这不是什么大问题，因为我可以添加其他属性来使所有浏览器中的值等于originalEvent.layerX/layerY。所以我不确定这是否是最好的方法，但它似乎有效... - zeke

Answer 2

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

- pterodactyl

---

虽然这段代码可能回答了问题，但是提供关于为什么和/或如何回答问题的额外上下文可以提高其长期价值。 - β.εηοιτ.βε