Safari中window的blur事件composedPath返回空数组问题

问题现象 #

给window绑定blur事件后，调用事件对象的composedPath()方法：

• Chrome浏览器返回包含window对象的数组（长度为1）
• Safari 15浏览器返回空数组

示例代码：

JavaScript代码 #

window.addEventListener('blur', (e)=>{
    debugger;
    console.log("Composed Path" , e.composedPath());
});

HTML代码 #

<head>
    <title>Example</title>
</head>
<body>
    <p>This is an example of a simple HTML page with one paragraph.</p>
</body>

原因分析 #

这是Safari的已知实现差异：针对全局window的blur事件，Safari并未构建完整的事件传播路径，因此composedPath()返回空数组。并非Safari不支持blur事件本身，而是事件路径处理逻辑与Chrome不同，MDN文档目前未明确标注这一细节。

解决方案 #

由于是window的blur事件，直接使用事件对象的target属性即可获取目标（在Safari和Chrome中均返回window），完全可以替代composedPath()的结果。如果需要统一跨浏览器的composedPath返回格式，可以做兼容处理：

window.addEventListener('blur', (e) => {
    // 兼容Safari的空数组情况
    const eventPath = e.composedPath().length > 0 ? e.composedPath() : [e.target];
    console.log("Composed Path", eventPath);
});

注：若为DOM元素（如输入框）绑定blur事件，Safari的composedPath()行为与Chrome一致，仅全局window的blur事件存在此差异。

内容的提问来源于stack exchange，提问作者Sultan