鼠标位置 - 跨浏览器兼容性

Question

在 Javascript 中使用鼠标我偶尔会遇到以下事件属性：

• clientX，clientY
• layerX, layerY
• offsetX，offsetY
• pageX, pageY
• screenX，screenY
• x, y

我想知道它们的跨浏览器兼容性一般是什么样的，因为我只找到了一些我正在尝试修补的信息。

Answer 1

您应该只依赖client*、movement*、screen*。在 MDN Web 文档中，它们在大多数主流浏览器中的兼容性是未知的，但它们应该被视为支持（否则，jQuery 在许多情况下会被破坏）。

page* 在 Firefox 中是不支持的，但是可以从上面的属性中计算出来。这是jQuery implementation的链接。

其他属性offset*、x、y、layer*不是标准的，如果你想编写高兼容性级别的代码，你应该停止使用它们。

我还发表了一篇博文，总结了 Javascript here 中所有与维度或位置相关的属性/方法。大家可以看看有没有用。

Answer 2

这是 jQuery 的做法：

// Calculate pageX/Y if missing and clientX/Y available
if ( event.pageX == null && event.clientX != null ) {
  var doc = document.documentElement, body = document.body;
  event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
  event.pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc   && doc.clientTop  || body && body.clientTop  || 0);
}

测试 pageX（或 pageY）或从 clientX 和 scrollLeft 和 clientLeft 计算它