Angular：如何避免Shift点击时浏览器选中表格文本

针对Chrome 103中Shift+单击表格行触发默认文本选中的问题，提供以下几种实用解决方案：

方案1：通过事件阻止默认行为 #

在表格行的mousedown事件中，检测到Shift键按下时直接阻止浏览器的默认文本选择行为，同时执行多选逻辑。

模板代码：

<tr *ngFor="let item of data" (mousedown)="onRowMouseDown($event, item)">
  <!-- 表格单元格内容 -->
</tr>

组件类代码：

onRowMouseDown(event: MouseEvent, item: any) {
  // 处理Shift多选逻辑
  if (event.shiftKey) {
    event.preventDefault(); // 阻止文本选中的默认行为
    // 这里执行你的Shift连续选中逻辑
    this.selectRange(item);
  } else if (event.ctrlKey || event.metaKey) {
    // 处理Ctrl/Command单击多选逻辑
    this.toggleSelect(item);
  } else {
    // 处理单行选中逻辑
    this.selectSingle(item);
  }
}

使用mousedown而非click是因为浏览器的文本选择行为在mousedown阶段触发，此时阻止默认行为能彻底避免文本选中。

方案2：用CSS全局禁用表格行文本选择 #

如果你的表格不需要用户选中文本内容，直接给表格行添加CSS样式禁用文本选择，这是最简洁的方案：

.table-row {
  user-select: none;
  -webkit-user-select: none; /* 兼容Chrome/Safari */
}

如果表格内有需要用户复制的单元格，可以单独给该单元格设置user-select: auto来恢复文本选择功能。

方案3：事后清除文本选择 #

若前两种方案无法适配你的场景，可以在执行完Shift多选逻辑后，主动清除浏览器的文本选择：

selectRange(item: any) {
  // 执行你的连续选中逻辑...

  // 清除文本选择
  const selection = window.getSelection();
  if (selection) {
    selection.removeAllRanges();
  } else if ((document as any).selection) {
    (document as any).selection.empty();
  }
}

这种方法属于事后补救，可能会出现文本选中一闪而过的情况，仅作为兜底方案使用。

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