Question

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

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

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

谢谢你们

Answer 1

以下是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

计算它

Answer 2

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

page* 在 Firefox 中不受支持，但可以通过上述属性进行计算。这是 jQuery implementation 的链接。

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

我还发表了一篇博文，总结了 Javascript here 中所有维度或位置相关的属性/方法。任何人都可以看看它是否有帮助。

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

2 个答案: