javascript - 防止点击并按住选择附近的文本

Question

如果用户在 iOS 和 Android 上点击并按住手指， native 浏览器行为将突出显示最近的可选文本。

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

交互工作正常，但当用户点击并按住时，两个平台仍然选择图表下方的文本。

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

我可以做些什么来告诉浏览器不要选择图表下方的文本吗？

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

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

Answer 1

工作解决方案:在调用 touchstart 时在文档中添加 user-select: noselect ，然后将其删除

与所有浏览器兼容的前缀 user-select compatibility for browsers