CSS如何防止带有用户选择的按钮：无在移动设备上选择外部文本？答案

【问题标题】：CSS How do you prevent a button with user-select: none from selecting outer text on mobile?CSS如何防止带有用户选择的按钮：无在移动设备上选择外部文本？
【发布时间】：2021-08-29 11:50:56
【问题描述】：

看看这个（过于简化的）sn-p：

HTML

<div class="container">
    <button class="no-select">Button</button>
    Container Text
</div>

CSS

.no-select {
    user-select: none; /* For comprehension sake, pretend this works for every browsers */
}

单击、拖动或双击桌面上的按钮时，它按预期工作：按钮内的文本未突出显示。

在移动设备上长按按钮仍然不会选择按钮内的文本，而是开始选择父级的文本。更准确地说，它可以选择下一个“可选择”的东西。在这种情况下，它将是容器文本（Container Text）。我只在iOS上测试过，其他设备可以确认一下吗？

您还可以在 Material-UI 的 buttons 上看到此行为。长按 iOS 上的其中一个按钮，您将看到该错误。

你如何防止这种行为发生？

【问题讨论】：

在 iOS 中可以通过向相关元素添加一个“touchstart”监听器然后在事件上调用 .preventDefault() 来避免这种情况......但这可能会让你失去触摸的能力 -如果在该元素上开始触摸（????），则滚动，因此不完全是“答案”。

标签： html css ios reactjs mobile

【解决方案1】：

HTML 文档中的节点bubble 其父级（以及后续父级）的大多数事件未被子级捕获。这就是你所看到的。

如果您想避免在（长）按子项时选择父项的其他文本，请尝试将其他文本包装在单独的元素中。

<div class="container">
  <button class="no-select">Button</button>
  <span class="container-text">Container Text</span>
</div>

一般来说，最好不要将裸文本放在其他 HTML 元素旁边，因为它会破坏语义推理。但是，在某些情况下它是可以接受的，例如锚标记或内嵌文本按钮。

【讨论】：

这不起作用（至少在 iOS14 中）。（参见：codepen.io/ianbellomy/pen/mdWgzvv）iOS 似乎会选择最接近长按元素的任何文本，无论它在层次结构中的哪个位置。