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

如果用户在iOS和Android上轻触并按住手指，本机浏览器的行为就是突出显示最近的可选文本

我正在构建一个网络应用程序，其中有一个与iOS Stocks应用程序中的图表类似的图表，您可以点击该图表了解特定点的详细信息，并在图表上滑动手指了解不同点的详细信息

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

我正在使用

touchstart

事件启动交互，并更新屏幕上显示的内容 触摸移动过程中的图表。这两个事件都调用

stopPropagation（）

和

preventDefault（）

我是否可以告诉浏览器不要选择图表下方的文本

注意：我不想在图表下方的文本上设置

user select:noselect

，因为我do希望可以选择其他文本。此外，这些图表可以移动，我并不总是知道它们下面有什么文字

如果有帮助的话，这里有一张我正在谈论的UI的图片，是在iOS上拍摄的。这张截图是在我点击并握住图表后拍摄的。如您所见，它突出显示了“取款”。同样的行为也发生在Android上

---

工作解决方案：在调用touchstart时在文档上添加

用户选择：noselect

，然后将其删除

---

与所有浏览器兼容的前缀

当调用

touchstart

时，您可以在文档中添加

user select:noselect

，然后将其删除。这是一个很好的建议。我来试一试。更新：这很有效。这感觉有点骇人，因为iOS仍然会触发媒体上的触觉反馈，但除非有更好的解决方案，否则我很可能会这么做。谢谢@Adrienleoir！美好的在IOS上，你可以使用-webkit前缀，在我的iphone上，它的工作将在几天内被批准；我想等一下，看看是否有其他想法先出现。很抱歉，这需要一些时间，但我只是接受了这个公认的答案。我已经用了几个星期了，没有问题。它工作得很好，我完全忘了它曾经是个问题！非常感谢阿德里安！例如，在react中，在

onTouchStart

处理程序中，运行类似以下内容：

document.body.style.webkitUserSelect=“none”。在
onTouchStop
：
document.body.style.webkitUserSelect=null