我正在尝试从一个简单的应用程序中调整一些代码，该应用程序使用 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 或其他任何地方找到具体答案。
所以，我想了一下这个问题，因为 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)
等等：http : //jsfiddle.net/GHZSd/30/
适用于 chrome、Safari、FF 和 Opera。
const bbox = e.target.getBoundingClientRect();
const x = e.clientX - bbox.left;
const y = e.clientY - bbox.top;