用于替换event.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现在仍然存在，所以我只是想添加/减去一些会导致这些值的东西）但是到目前为止一些是有效的浏览器不适用于所有这些。

很抱歉，如果之前有人询问过，但我无法在SO或其他任何地方找到具体的答案。

Answer 1

所以，我想了一下这个问题，因为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)

Etvoilà：http://jsfiddle.net/GHZSd/30/

适用于chrome，Safari，FF和Opera。

Answer 2

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