如何防止 iOS Safari 做出不需要的选择？

Question

当我在 iOS Safari 中长按 React 应用程序上的工具栏按钮时，它会选择图标。我用工具栏上的 CSS 禁用了它：

-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;

但随后 Safari 会继续选择它能找到的下一个愚蠢元素。

因此，我最终将样式应用到应用程序的根目录，但现在用户当然无法选择段落等内容中的任何文本。

我真正想要的是一种设置屏障的方法，上面写着“Safari，你能停止尝试选择你可能找到的下一个东西吗？”

因此，在我的工具栏组件上，我执行了此操作并验证了它被调用：

  onTouchStart={e => {
    e.stopPropagation();
    e.preventDefault();
    e.bubbles = false;
  }}

我也尝试过这个：

  onTouchStartCapture={e => {
    e.stopPropagation();
    e.preventDefault();
    e.bubbles = false;
  }}

onSelect与,相同onSelectCapture。

然而，Safari 会忽略所有这些，并继续选择层次结构中的内容，一直到根 DIV，直到找到无意义的内容可供选择。当我通过复制查看它选择的内容时，它只是一个空格。

我缺少什么？我是否真的必须应用user-select: none;到根目录，然后选择性地允许在有意义的地方进行选择，例如包含文本的 DIV？那么，长按工具栏时，Safari 怎么会找不到并选择它呢？

Answer 1

您可以应用以下 css，以便您仍然可以选择<p>和<h>标记：

p {
 -webkit-user-select: text !important;
 user-select: text !important;
}
h1 {
 -webkit-user-select: text !important;
 user-select: text !important;
}
h2 {
 -webkit-user-select: text !important;
 user-select: text !important;
}
h3 {
 -webkit-user-select: text !important;
 user-select: text !important;
}
h4 {
 -webkit-user-select: text !important;
 user-select: text !important;
}
h5 {
 -webkit-user-select: text !important;
 user-select: text !important;
}
h6 {
 -webkit-user-select: text !important;
 user-select: text !important;
}