如何在 addEventListener 跨浏览器中使用 e.path？

【问题标题】：How to use e.path in addEventListener cross-browser?如何在 addEventListener 跨浏览器中使用 e.path？
【发布时间】：2020-04-26 18:28:34
【问题描述】：

这适用于 Chrome：

document.querySelectorAll('input[type="text"]').forEach(elt => { 
    elt.addEventListener("change", e => { 
        localStorage.setItem(e.path[0].name, e.path[0].value); 
    });
});

但在 Firefox 上生成：

TypeError: e.path 未定义

什么是 e.path[0] 的跨浏览器等效项？

【问题讨论】：

那是什么类型的元素？
@DanielA.White 我编辑以增加精度：这是一个<input type="text">

标签： javascript google-chrome firefox addeventlistener

【解决方案1】：

Firefox 等效 e.composedPath()

document.querySelectorAll('input[type="text"]').forEach(elt => { 
    elt.addEventListener("change", e => { 
        let path = e.path || e.composedPath()
        localStorage.setItem(path[0]?.name, path[0]?.value); 
    });
});

如果浏览器仍然不支持它们，它不会给出错误但设置 Item undefined:undefined 因为使用 path?.property

【讨论】：

您会使用哪种跨浏览器解决方案（适用于 Firefox、Chrome、IE 等）？
这似乎解决了它：stackoverflow.com/questions/39245488/…：var path = event.path || (event.composedPath && event.composedPath());
PS：简单的e.target怎么样？
如果你只想要 path[0] 那么 e.target 是正确的