如何移除Ctrl点击表格元素时的默认蓝色边框？现有方案均无效

我太懂你这个烦恼了——Ctrl点击表格想选行，结果文本跟着被选中，尤其是点单元格间隙时直接全选，之前试的方法要么不管用，要么还影响正常选文本，确实闹心。给你分享一个精准的无jQuery方案，完美解决这个问题：

核心思路 #

问题出在你之前用的click事件触发太晚，浏览器已经开始选中文本了。咱们换成mousedown事件（这是用户点击时第一个触发的事件），在浏览器还没开始选文本的时候就阻止默认行为，但只在Ctrl点击时才这么做，完全不影响用户正常选中文本的需求。

实现代码 #

const tbody = document.querySelector('tbody');

tbody.addEventListener('mousedown', (e) => {
  // 仅处理Ctrl+点击的场景
  if (!e.ctrlKey) return;

  // 找到点击对应的行：不管点的是TD、TD里的子元素，还是tbody间隙
  const targetTd = e.target.closest('td');
  const row = targetTd ? targetTd.parentElement : e.target.closest('tr');

  if (row) {
    e.preventDefault(); // 直接阻止默认选中文本行为，从根源避免选中
    // 这里执行你的行选中逻辑，比如切换选中样式
    row.classList.toggle('selected');
  }
});

为什么这个方案管用？ #

• 无延迟：mousedown在选中文本前触发，preventDefault()直接掐断了浏览器的选中文本流程，不会像之前那样要等mouseup才清除选中。
• 不影响正常选文本：只有Ctrl点击时才阻止默认行为，用户平时选文本完全不受影响。
• 覆盖间隙场景：用closest()方法不管点击的是单元格、单元格里的子元素，还是tbody的间隙，都能精准找到对应的行，同时阻止间隙点击时的全选问题。

额外优化提示 #

如果你的表格里有可输入元素（比如input），记得加个判断跳过这些元素，避免影响输入：

// 在if (row)之前加：
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;

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