Safari中addEventListener的click事件异常问题求助

在addEventListener的click事件中调用fx_Hello函数时，预期点击HTML页面任意区域或元素都会弹出alert弹窗，该功能在Chrome和Firefox中正常运行，但在iOS的Safari浏览器中，仅点击id为some_ID的链接时弹窗才会出现。请问为何Safari中addEventListener的表现与其他浏览器不同？该如何修复使其在Safari中正常工作？

相关代码 #

HTML #

<body>
 <div>
  <a href="javascript:void(0);" id="some_ID">Click Here</a>
 </div>
</body>

JavaScript #

var vMain = {
 
 fx_Hello(e){ 
  alert("Hello World!");
  console.log("id: " + e.target.parentNode.id);
 },

 fx_Goodbye(e){ 
  alert("Goodbye Cruel World!");
  console.log("id: " + e.target.parentNode.id); 
 }

}

window.addEventListener("click", function (){ 
 vMain.fx_Hello(event);
});

iOS Safari存在特殊的交互规则：默认情况下，非可交互元素（如<body>、<div>这类没有原生点击交互能力的元素）不会触发click事件。

代码中通过window监听click事件，依赖于底层元素的click事件向上冒泡，但iOS Safari中点击<body>或<div>时，浏览器不会生成click事件，自然无法冒泡到window；而<a>标签是原生可交互元素，点击它会正常触发click事件并冒泡，因此只有点击该链接时才会触发弹窗。

此外，代码中直接使用全局event对象的写法不符合标准，虽然多数浏览器兼容，但存在潜在问题，建议同步修正。

以下两种方式可解决该问题，按需选择：

方式一：为非可交互元素添加交互标识 #

通过CSS给<body>、<div>这类元素添加交互特性，告诉Safari它们是可点击的：

body, div {
  cursor: pointer;
  touch-action: manipulation; /* 优化触摸体验，避免双击缩放等干扰 */
}

方式二：改用触摸事件监听 #

如果仅针对移动端触摸场景，可将click事件替换为touchstart事件，iOS Safari对触摸事件的支持更统一，所有元素都会触发该事件：

window.addEventListener("touchstart", function (e){ 
 vMain.fx_Hello(e);
});

额外优化：修正事件对象传递 #

将全局event改为使用函数参数接收事件对象，符合标准写法，提升跨浏览器兼容性：

window.addEventListener("click", function (e){ 
 vMain.fx_Hello(e);
});

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