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

Cross-browser solution for replacing the use of event.layerX and event.layerY

本文关键字：event 浏览器 解决方案 layerY 替换 layerX 用于      更新时间：2023-09-26

我正在尝试从一个简单的应用程序中改编一些代码，该应用程序使用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 现在仍然存在，所以我只是试图添加/减去一些会导致这些值的东西），但到目前为止，在一个浏览器上有效的方法并不适用于所有这些浏览器。

抱歉，如果之前有人问过这个问题，但我无法在堆栈溢出或其他任何地方找到具体的答案。

所以，我想了一下这个问题，因为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;
相关文章：