關於offsetX、layerX、clientX、screenX以及pageX(Y同理)

關於offsetX、layerX、clientX、screenX以及pageX

咱們都熟知,標題中的幾個方法都是用來獲取事件(event)的位置,可是他們有什麼區別呢?就用一張圖來講明:
圖片描述spa

  • offsetX: 指事件發生位置相對觸發元素左上角的水平座標
  • layerX: FF特有,鼠標相比較於當前座標系的位置,即從當前容器依次往上尋找設置絕對定位或相對定位的元素爲參考座標系,以該容器的左上角來計算水平座標
  • clientX: 是指事件發生位置相對可視區域的水平座標(只是document展示的部分,不包括搜索欄、書籤欄等)
  • screenX: 是指事件發生位置相對電腦屏幕的水平座標
  • pageX: 是指事件發生位置相對文檔(document)的水平座標(是指整個文檔,當出現滾動條時,隱藏的部分也會被算入pageX)
相關文章
相關標籤/搜索