iOS Safari中pointer-events:none失效：类a与类b差异解析

1. 类a与类b的差异 #

• 类a对应的<div>元素直接包含文本节点作为子内容，未嵌套其他HTML元素；
• 类b对应的<div>元素嵌套了<span>元素，文本内容被<span>包裹。

2. 类a在iOS Safari中pointer-events:none失效的原因 #

这是iOS Safari的兼容性bug：当设置了pointer-events:none的元素直接包含文本节点时，Safari会错误地将文本节点判定为可交互区域，进而触发绑定在父元素上的点击事件。而当元素内部嵌套了其他HTML元素（如类b中的<span>），pointer-events:none的规则会正常作用于整个元素，不会出现点击事件误触发的问题。

临时修复方案 #

要让类a元素在iOS Safari中正常生效，只需给直接包含文本的<div>嵌套一个元素来承载文本内容，比如：

<div class="a" (click)="goWebSite()">
  <span>text-a</span>
</div>

通过消除直接的文本节点，就能规避这个Safari的bug。

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