如何在JavaScript中阻止双击操作触发文本选中？

1. 阻止双击时的文本选中 #

浏览器双击选中文本属于默认行为，dblclick事件中调用preventDefault()无法阻止，因此可以在双击触发后手动清除选区来解决。

2. 区分双击与普通选中，避免工具栏误触发 #

通过设置标志位标记当前操作是双击，在mouseup事件中判断该标志位，若为双击则不执行显示工具栏的逻辑，同时用定时器重置标志位，确保不影响正常的文本选中操作。

修改后的完整代码 #

let currentAudio;
let isDoubleClick = false;

document.addEventListener('dblclick', function(e) {
  // 标记当前为双击操作
  isDoubleClick = true;
  // 1秒后重置标志位，避免影响正常选中
  setTimeout(() => isDoubleClick = false, 1000);

  const selection = window.getSelection();
  const selectedText = selection.toString();

  // 清除选区，阻止双击选中文本
  selection.removeAllRanges();

  if (selectedText) {
    const range = selection.getRangeAt(0);
    const selectedNode = range.startContainer.parentNode;

    if (selectedNode.tagName === 'P' && selectedNode.hasAttribute('data-audio')) {
      const audioFile = selectedNode.getAttribute('data-audio');

      // 停止当前播放的音频
      if (currentAudio && !currentAudio.paused) {
        currentAudio.pause();
        currentAudio.currentTime = 0;
      }

      // 播放新音频
      playAudio(audioFile);
    }
  }
});

function playAudio(audioFile) {
  // 示例音频播放逻辑
  currentAudio = new Audio(audioFile);
  currentAudio.play();
}

const toolbar = document.getElementById('toolbar');
document.addEventListener('mouseup', function() {
  const selection = window.getSelection();
  const selectedText = selection.toString();

  // 若是双击操作，直接返回不显示工具栏
  if (isDoubleClick) {
    toolbar.style.display = 'none';
    return;
  }

  if (selectedText.length > 0) {
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();

    toolbar.style.top = `${rect.top - toolbar.offsetHeight}px`;
    toolbar.style.left = `${rect.left}px`;
    toolbar.style.display = 'block';
  } else {
    toolbar.style.display = 'none';
  }
});

补充说明 #

• 清除选区使用window.getSelection().removeAllRanges()，是阻止双击选中文本最直接的方式；
• 标志位isDoubleClick配合定时器，确保双击操作后短时间内不会误触发工具栏，同时不影响正常的单击选中文本操作；
• 若需求是完全禁止目标p标签的双击选中，也可以给.verse类添加CSS：.verse { user-select: none; }，但此设置会导致用户无法手动选中这些段落的文本，需根据实际场景选择。

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