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

Question

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

• clientX, clientY
• layerX, layerY
• offsetX, offsetY
• pageX, pageY
• 屏幕X，屏幕Y
• 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 ans clientLeft 计算它