event.clientX 和 event.clientY 与 event.x 和 event.y答案

【问题标题】：event.clientX and event.clientY vs event.x and event.yevent.clientX 和 event.clientY 与 event.x 和 event.y
【发布时间】：2014-02-26 00:55:33
【问题描述】：

检测鼠标x和y坐标时，最好这样使用event.clientX和event.clientY：

function show_coords(event){
  var x=event.clientX;
  var y=event.clientY;
  alert("X coords: " + x + ", Y coords: " + y);
}

或者使用 x 和 y，像这样：

function show_coords(event){
  var x=event.x;
  var y=event.y;
  alert("X coords: " + x + ", Y coords: " + y);
}

一种方法比另一种更好/更快吗？它们似乎与我的工作方式相同。

【问题讨论】：

clientX 更适合跨浏览器，但仍不适用于所有浏览器（如 FireFox）。
event.x 在 W3C 工作草案中指定，但很多浏览器不支持？您最好使用clientX，或者其他任何一个，offsetX、pageX 等。clientX 是当前推荐的标准。

标签： javascript performance coordinates var

【解决方案1】：

我猜 event.x/y 只在 IE 中定义。来自 IE 文档的引用：

"event.clientX: 获取鼠标光标相对于窗口客户区的 x 坐标，不包括窗口装饰或滚动条。"

"event.x: 获取鼠标光标相对于父元素的 x 坐标。"

正如 putvande 所说，clientX 也可能不是跨浏览器。 pageX/Y 可能是更安全的选择。

【讨论】：