如何阻止iOS/Mobile Safari长按(taphold)事件的默认文本高亮行为

方案一：CSS+JS组合控制，手动实现单词选中 #

先通过CSS禁用默认文本选择，避免Safari自动整段高亮，再在长按事件里手动定位并选中目标单词：

1. 给文本容器添加CSS：

.text-container {
  -webkit-user-select: none; /* 禁用Safari默认文本选择 */
  user-select: none;
}

2. 监听长按事件，手动定位单词并完成选中：

const textContainer = document.querySelector('.text-container');

// 可选：阻止长按弹出系统菜单
textContainer.addEventListener('contextmenu', e => e.preventDefault());

textContainer.addEventListener('touchstart', function(e) {
  const touch = e.touches[0];
  let target = document.elementFromPoint(touch.clientX, touch.clientY);
  
  // 定时器模拟长按触发（时长可根据需求调整）
  this.longPressTimer = setTimeout(() => {
    // 确保拿到文本所在的元素节点
    if (target.nodeType === Node.TEXT_NODE) {
      target = target.parentElement;
    }

    const selection = window.getSelection();
    const range = document.createRange();
    const text = target.textContent;
    const rect = target.getBoundingClientRect();
    const clickOffset = touch.clientX - rect.left;

    // 计算点击位置对应的单词
    const words = text.split(/\s+/);
    let currentOffset = 0;
    let targetWordIndex = 0;

    for (let i = 0; i < words.length; i++) {
      // 包含单词后的空格长度
      const wordLength = words[i].length + 1;
      if (currentOffset + wordLength > clickOffset / rect.width * text.length) {
        targetWordIndex = i;
        break;
      }
      currentOffset += wordLength;
    }

    // 定位到目标单词的起止位置并选中
    const wordStart = text.indexOf(words[targetWordIndex]);
    const wordEnd = wordStart + words[targetWordIndex].length;

    range.setStart(target.firstChild, wordStart);
    range.setEnd(target.firstChild, wordEnd);
    selection.removeAllRanges();
    selection.addRange(range);
  }, 700);
});

// 触摸移动或结束时清除定时器，避免误触发
textContainer.addEventListener('touchmove', function() {
  clearTimeout(this.longPressTimer);
});

textContainer.addEventListener('touchend', function() {
  clearTimeout(this.longPressTimer);
});

这个方法的核心是禁用默认选择后自行实现单词定位逻辑，完全避开Safari的整段高亮问题，同时保留window.getSelection的使用场景。

方案二：动态切换选择权限，拦截默认高亮 #

如果不想完全禁用默认选择，可以通过touch事件动态调整user-select状态：

1. 初始CSS保留默认选择权限：

.text-container {
  user-select: text;
}

2. 编写JS逻辑控制选择状态：

const textContainer = document.querySelector('.text-container');
let isLongPress = false;

textContainer.addEventListener('touchstart', function(e) {
  this.longPressTimer = setTimeout(() => {
    isLongPress = true;
    // 临时禁用选择，阻止Safari整段高亮
    this.style.webkitUserSelect = 'none';
    // 插入方案一中的手动单词选中逻辑
    // ...
  }, 700);
});

textContainer.addEventListener('touchend', function() {
  clearTimeout(this.longPressTimer);
  if (!isLongPress) {
    // 普通点击，恢复默认选择权限
    this.style.webkitUserSelect = 'text';
  }
  isLongPress = false;
});

textContainer.addEventListener('touchmove', function() {
  clearTimeout(this.longPressTimer);
  this.style.webkitUserSelect = 'text';
  isLongPress = false;
});

替代方案：双击选词实现 #

如果长按的问题难以彻底解决，双击选词是可行的替代方案，触发时机换成dblclick事件即可：

textContainer.addEventListener('dblclick', function(e) {
  e.preventDefault(); // 阻止系统默认的双击选中行为
  const target = document.elementFromPoint(e.clientX, e.clientY);
  
  // 复用方案一中的单词定位和选中逻辑
  // ...
});

关键注意点 #

• 如果文本是由<span>等标签逐个包裹单词的结构，直接获取对应元素会比计算偏移量更精准。
• 定时器时长（示例中700ms）可以调整，尽量贴近Safari默认的长按触发阈值。
• 若不需要系统长按菜单，记得拦截contextmenu事件。

内容的提问来源于stack exchange，提问作者ajlidz