如何防止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;
}