在 iOS 15 Safari 上动态设置指针事件是不可靠且不可预测的

Question

在 iOS 15 上的 Safari 中，已应用容器中的链接在稍后设置为动态pointer-events: none;时不会变得可点击。事实上，在某些情况下确实如此，但这是非常不可预测的。例如，当容器是 an并且链接位于元素内部时，它们确实变得可点击。或者当链接有同级时。我知道这听起来很奇怪，但这是事实。我做了一个演示，所以你可以自己尝试一下：https://stackblitz.com/edit/web-platform-mdhjqs?file =index.htmlpointer-eventsallullibutton

我错过了什么吗？这是 iOS 15 上 Safari 独有的错误吗？

Answer 1

我在 Safari iOS 15 中偶然发现了同样的问题，这在移动 Chrome 或桌面 Safari 上不会发生。

我发现获得相同行为的解决方案是使用 JS 设置内联样式，如下所示：

if (el.classList.contains("is-clickable")) {
    el.style.pointerEvents = "all";
} else {
    el.style.pointerEvents = "none";
}

我还删除了 CSS 中的所有属性规范。一旦将属性设置为noneCSS 中的任何位置，使用内联样式就不再起作用，这很奇怪，因为人们会期望内联样式始终优先于类。

对我来说，这也是结构的问题ul > li > a，无论是在我的测试用例中还是在 Senne 的示例中。

我也尝试过将指针事件设置为auto或 ，initial但没有成功。