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

我正在尝试使用Raphael的简单应用来调整一些代码，以允许用户在画布上绘制圆和矩形。（原始代码在https://gist.github.com/673186）跨浏览器解决方案，用于替换event.layerX和event.layerY的使用

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

但是，使用jQuery的更新版本打破了这个例子。请参阅http://jsfiddle.net/GHZSd/1/

原因是event.layerX和event.layerY不再在新版本的jQuery中定义。我的问题是 - 我可以用什么代码来替换这些值？我只是通过做一些数学尝试了几件事情（event.originalEvent.layerX/layerX现在仍然存在，所以我只是想添加/减去一些会导致这些值的东西），但到目前为止什么对一个浏览器不适用于所有这些浏览器。

对不起，如果这之前已经问过，但我无法找到SO或其他任何地方的具体答案。

来源

2012-04-12 zeke

欢迎来到图书馆依赖的乐趣。你可以留在旧的jQuery中（你为什么要升级？）或者找出如何在旧版本中实现图层，并在新版本中重新实现它们。 – RobG 2012-04-12 22:43:40

我不明白你为什么不使用原始事件，它工作正常：http://jsfiddle.net/GHZSd/19/ – mddw 2012-04-12 23:16:21

@RobG - 我需要为我的项目的其他元素的jQuery的更新版本。 – zeke 2012-04-12 23:37:21

所以，我想了解一下这个问题，因为Chrome团队想要删除layerX和layerY，原因很奇怪。

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

var position = $paper.offset();

（对于那些读不拨弄开，$纸是在SVG将绘制在div）

它给了我们两个coords，position.top和position.left，所以我们知道在页面中的哪个容器。

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

的Et瞧：http://jsfiddle.net/GHZSd/30/

适用于Chrome，Safari浏览器，FF和Opera。

来源

2012-04-12 23:46:26 mddw

是的，这是有效的。我来到了一个类似的解决方案。一个奇怪的是，虽然这在我发布的示例中工作正常，但在我正在使用的应用程序中，使用Chrome时X和Y都有1像素差异。没有什么大不了的，我还可以添加一些其他属性，使所有浏览器中的东西都等于originalEvent.layerX/layerY。所以不知道这是否是最好的方法，但它似乎工作... – zeke 2012-04-13 14:54:51

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

回答

相关问题