Js event对象offsetX，pageX，screenX，clientX

摘要：平时在测量元素位置时难以确定，下面给出具体的event对象中的各种属性，以便日后使用。检测相对于浏览器的位置：clientX和clientY，当鼠标事件发生时，鼠标相对于浏览器左上角的位置

平时在测量元素位置时难以确定，下面给出具体的event对象中的各种属性，以便日后使用。

检测相对于浏览器的位置：clientX和clientY，当鼠标事件发生时，鼠标相对于浏览器左上角的位置

检测相对于文档的位置：pageX和pageY，当鼠标事件发生时，鼠标相对于文档左上角的位置。（IE7/8无）（类似于event.clientX和event.clientY）

检测相对于屏幕的位置：screenX和screenY，当鼠标事件发生时，鼠标相对于屏幕左上角的位置

检测相对于事件源的位置：offsetX和offsetY，当鼠标事件发生时，鼠标相对于事件发生元素左上角的位置

不同浏览器对event事件的兼容：

tip：让Firefox支持offsetX、offsetY：

//计算光标相对于第一个定位的父元素的坐标
function coordinate(e){
  var o = window.event || e,
      coord,
      coord_X,
      coord_Y;
 
  coord_X = (o.offsetX === undefined) ? getOffset(o).X : o.offsetX;
  coord_Y = (o.offsetY === undefined) ? getOffset(o).Y : o.offsetY;
  coord = { "coord_X" : coord_X , "coord_Y" : coord_Y };
  return coord;
}
function getOffset(e){
  var target = e.target, // 当前触发的目标对象
      eventCoord,
      pageCoord,
      offsetCoord;
 
  // 计算当前触发元素到文档的距离
  pageCoord = getPageCoord(target);
 
  // 计算光标到文档的距离
  eventCoord = {
    X : window.pageXOffset + e.clientX,
    Y : window.pageYOffset + e.clientY
  };
 
  // 相减获取光标到第一个定位的父元素的坐标
  offsetCoord = {
    X : eventCoord.X - pageCoord.X,
    Y : eventCoord.Y - pageCoord.Y
  };
  return offsetCoord;
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_5019