javascript - 跨浏览器替换使用event.layerX和event.layerY的方案

Question

我正在尝试从一个使用 Raphael 的简单应用程序中改编一些代码，以允许用户在 Canvas 上绘制圆形和矩形。 (原始代码在 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 或其他任何地方找到具体的答案。

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)

等等:http://jsfiddle.net/GHZSd/30/

适用于 chrome、Safari、FF 和 Opera。