event.path引數被瀏覽器刪除，如何一勞永逸的解決

天渺工作室發表於2023-02-12
瀏覽器

問題


2月初，Chrome(版本號109.0.5414.120)在一次升級中刪除繫結點選等等部分事件中的Event.path陣列引數，(Edge和其他國產chromium核心瀏覽器是沒有變化的),官方升級記錄日誌記錄。\
最早從官方issue中可獲知chromium核心團隊早在21年就開始認為 Event.path 屬於非標準 API,某些地方已經開始刪除event.path陣列引數了。\
且event.path是Chrome核心單獨支援的屬性，不在MDN的標準中。所以相容性還是存在缺點。

解決方法

方法1（不推薦）：

var composed = Event.composedPath();

MDN中有一個composedPath方法，但是根據網上的某些網友反饋也有可能返回空陣列（暫未找到原因）。

方法2（推薦）：

自己仿照 composedPath() 方法原理,將當前所有的冒泡一層一層 parentNode 元素收集起來。在push到陣列裡面。

const composedPath = (e: Record<string, any>) => {
  // 當前有直接return
  let pathArr = e.path || (e.composedPath && e.composedPath()); // 優先判斷 Event.composedPath() 方法是否為空陣列
  if ((pathArr || []).length) { 
    return pathArr;
  }
  // 不存在則遍歷target節點
  let target = e.target
  e.path = []
  while (target.parentNode !== null) {
    e.path.push(target)
    target = target.parentNode
  }
  // 最後在add進去 document 與 window物件
  e.path.push(document, window)
  return e.path;
};

相關文章