Js event對象offsetX，pageX，screenX，clientX詳解

   平時在測量元素位置時難以確定，下面給出具體的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;
}

　　

 

---

 

以后會繼續添加內容