如何用JavaScript阻止点击Canvas时选中其下方文本？

这个坑我踩过！当你在Canvas上双击或快速三击时，浏览器的默认文本选中行为会“穿透”Canvas元素，选中它下面的内容。其实只需要通过阻止相应事件的默认行为就能轻松解决，下面给你几种实用方案：

最简洁的方案：拦截selectstart事件 #

selectstart是浏览器触发文本选中动作时的专属事件，直接在Canvas上阻止这个事件的默认行为，就能彻底杜绝任何形式的文本选中（包括双击、三击、拖拽选中）：

document.addEventListener('DOMContentLoaded', () => {
  const canvas = document.getElementById('your-canvas-id');
  // 阻止Canvas区域内的文本选中行为
  canvas.addEventListener('selectstart', (event) => {
    event.preventDefault();
  });
});

针对性拦截双击/三击事件 #

如果你只想针对双击或三击场景处理，可以单独绑定dblclick事件，再通过计数判断三击行为：

document.addEventListener('DOMContentLoaded', () => {
  const canvas = document.getElementById('your-canvas-id');
  let clickCount = 0;
  let clickTimer;

  // 阻止双击默认行为
  canvas.addEventListener('dblclick', (e) => {
    e.preventDefault();
  });

  // 拦截三击事件
  canvas.addEventListener('mousedown', (e) => {
    clickCount++;
    if (clickCount === 3) {
      e.preventDefault();
      clickCount = 0;
    }
    // 300ms内没有新点击就重置计数（匹配浏览器连续点击的判断阈值）
    clearTimeout(clickTimer);
    clickTimer = setTimeout(() => {
      clickCount = 0;
    }, 300);
  });
});

CSS + JS双重保障 #

为了更稳妥，你可以先给Canvas加CSS禁止文本选中，再配合JS拦截事件，就算CSS在某些场景失效，JS也能兜底：

#your-canvas-id {
  user-select: none;
  -webkit-user-select: none; /* 兼容Chrome、Safari */
  -moz-user-select: none; /* 兼容Firefox */
  -ms-user-select: none; /* 兼容IE/Edge */
}

然后加上前面的selectstart事件拦截代码就行。

注意：一定要确保JS代码在DOM加载完成后执行（比如放在DOMContentLoaded事件里，或者把JS脚本放在</body>标签前），不然可能找不到Canvas元素哦～

内容的提问来源于stack exchange，提问作者no one special