鼠标点击相对于元素的坐标答案

【问题标题】：Mouse click coordinates relative to element鼠标点击相对于元素的坐标
【发布时间】：2014-04-08 02:42:33
【问题描述】：

我需要获取鼠标点击事件相对于目标元素的坐标。也就是说，我正在寻找offsetX，offsetY，但我知道这些属性在不同浏览器中的实现非常不一致。

我发现的大多数解决方案都涉及迭代元素的父元素、添加偏移量等。

不过根据this website，这些坐标很容易计算如下：

var rect    = targetEl.getBoundingClientRect(),
    offsetX = ev.clientX - rect.left,
    offsetY = ev.clientY - rect.top;

在不同的浏览器中使用它是否安全？有什么我应该知道的恐怖故事吗？

注意：我不想为此使用 JQuery 或类似的东西。

【问题讨论】：

【解决方案1】：

在 Mozilla Firefox、Google Chrome、Opera、Safari 等最新版本的浏览器中不会有太大问题。但在旧版本的浏览器中（尤其是 Internet Explorer）可能会出现问题。

【讨论】：

是的，“可能存在问题”是我要问的部分。您是否知道任何具体问题？
IE 版本低于 9 对我来说是噩梦。此外，Firefox 版本低于 15 或 16。但 Firefox 开发人员在通过快速添加功能和修复错误来实现浏览器的完整性方面做得很好。如果需要，请检查 IE -9 版本。