用于替换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)

它给了我们两个COORDS,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.