关于前端:eventpath参数被浏览器删除如何一劳永逸的解决

38次阅读

共计 783 个字符,预计需要花费 2 分钟才能阅读完成。

问题

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;
};

正文完
 0