防止长按选择附近文本

Question

在iOS和Android上，如果用户点击并长按他们的手指，本地浏览器的行为是突出显示最近可选择的文本。

我正在构建一个Web应用程序，在其中有一个类似于iOS股票应用程序中的图表，您可以点击图表以获取有关特定点的详细信息，并沿着图表滑动手指以获取有关不同点的详细信息。

交互效果很好，但当用户点击并长按时，两个平台仍会选择图表下方的文本。

我使用 touchstart 事件开始交互，并在 touchmove 期间更新在图表上所显示的内容。这两个事件都调用了 stopPropagation()和 preventDefault()。

是否有办法告诉浏览器不要选择图表下方的文本？

注意：我不想在图表下方设置 user-select: noselect ，因为我确实希望文本可选。此外，这些图表可以移动，我并不总是知道它们下面的文本是什么。

如果有帮助的话，这是我谈论的UI的图像，拍摄于iOS。此截屏是我点击并长按图表后拍摄的。如您所见，它突出显示了“提款”。在Android上也会出现相同的行为。

- jamesplease

---

当触发 touchstart 事件时，您可以在文档中添加 user-select: noselect，然后再将其删除。 - Adrien Leloir

这是一个很好的建议。我会试一试。 - jamesplease

更新：这个方法可行。因为iOS仍然会在按下时触发触觉反馈，所以感觉有点hacky，但除非有更好的解决方案被提出，否则我可能会采用这种方法。谢谢@AdrienLeloir！ - jamesplease

不错！在IOS上，你可以使用-webkit前缀，它可以在我的iPhone XS上工作。 - Adrien Leloir

Answer 1

解决方案：在触发touchstart事件时，在您的文档上添加user-select：noselect，然后再删除它。

为确保与所有浏览器兼容性，请添加前缀 user-select compatibility for browsers

- Adrien Leloir

---

我会在几天后标记为批准；我想先等待是否有其他的想法进来。 - jamesplease

很抱歉让你等了这么久，但我刚刚接受了这个答案。我已经使用了几周，没有出现任何问题。它运行得非常好，以至于我完全忘记了它曾经是一个问题！非常感谢Adrien！ - jamesplease

例如，在React中，在onTouchStart处理程序中运行以下内容：document.body.style.webkitUserSelect = "none";。而在onTouchStop中，则是：document.body.style.webkitUserSelect = null;。 - Markus