防止 taphold 事件上的默认 ios/mobile safari 突出显示行为

Question

所以我希望用户能够通过 taphold 事件选择单个单词。用户的选择能力对于下游应用程序很重要（我后来使用 window.getSelection 所以我不想完全禁用用户的选择能力）。然而，每当用户参与点击事件时，虽然生成的应用程序正常运行，但移动 safari ui 会导致突出显示整个文本段落，这是非常不受欢迎的。这是我要避免的特定行为。

到目前为止我已经尝试了以下

1. preventDefault taphold 事件和 touchstart。问题是，在 touchstart 上，这会禁用滚动。 taphold 上的 preventDefault 似乎显然没有做任何事情
2. 根据 this 更改 css。这通常会阻止用户选择，这是不可取的。
3. 以上两个的变体，包括带有内部 taphold 事件的父级 touchstart 事件，然后触发父级 preventDefault。在 touchstart 事件上使用 stopPropogation。尝试不同规格的 css。特别是 -webkit-tap-highlight-color: transparent;这似乎什么都不做。

诚然，我是使用 js 和 css 的新手，所以我可能以错误的方式处理这个问题。理想情况下，如果有人知道如何在 ios 上防止这种行为，那就太理想了。否则，我愿意接受文本选择的替代解决方案而不是 taphold。如果无法解决此问题，我目前考虑的方向是在移动设备上实现某种形式的双击选择，但我仍然不确定如何在没有 window.getSelection 的情况下获取准确的文本。 感谢您的帮助，谢谢。

Answer 1

为了防止默认的 iOS/移动 Safari 突出显示点击事件，您可以使用 touchstart 和 touchend 事件来检测用户是否长时间按住手指，然后使用 preventDefault() 方法来防止默认突出显示行为。

这是一个示例，说明如何使用 JavaScript 防止 taphold 事件的默认突出显示行为：

var tapholdTimeout;

element.addEventListener('touchstart', function(event) {
  tapholdTimeout = setTimeout(function() {
    event.preventDefault();
  }, 500); // Change this value to adjust the taphold time threshold
});

element.addEventListener('touchend', function(event) {
  clearTimeout(tapholdTimeout);
});

在这个例子中，我们使用 touchstart 事件通过 setTimeout() 方法启动一个定时器，它将在设定的时间量（在本例中为 500 毫秒）后执行该函数。如果 touchend 事件在计时器完成之前触发，我们将使用 clearTimeout() 方法取消计时器。

当计时器完成时，该函数将被执行，我们将调用事件对象的 preventDefault() 方法以防止默认高亮行为。

您可以在 setTimeout() 方法中调整阈值来确定在触发 taphold 事件之前用户需要按住手指多长时间。请记住，如果阈值太短，它可能会干扰页面上的其他触摸交互，因此您需要根据需要测试和调整该值。