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

Preventing tap-and-hold from selecting nearby text

如果用户点击并按住 iOS 和 Android,浏览器的本机行为是突出显示最近的 select 可用文本。

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

交互工作正常,但是当用户点击并按住时,两个平台仍然select显示图表下方的文本。

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

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

注意:我不想在图表下方的文本上设置 user-select: noselect,因为我 do 希望文本可以 select 否则.此外,这些图表可以四处移动,我不会总是知道它们下面的文字。

如果有帮助,这是我正在谈论的 UI 拍摄于 iOS 的图像。此屏幕截图是在我点击并按住图表后拍摄的。如您所见,它突出显示了 "Withdrawals"。同样的行为发生在 Android.

可行的解决方案:在调用 touchstart 时在您的文档中添加 user-select: noselect,然后将其删除

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