如何在保留onClickRow事件的同时实现Bootstrap表格文本选中

最近踩了个Bootstrap表格的坑：完全没法选中表格里的任何文本！折腾了好一通才找到两全其美的解决办法，分享给有同样问题的朋友：

排查过程 #

1. 先从CSS入手尝试修复
   一开始我以为是CSS限制了文本选中，查了相关属性后写了个局部修复：

   .table td, .table th {
     -webkit-user-select: text;
     user-select: text;
   }
   

   但这只是临时凑效，没解决根本问题，偶尔还是会出现选不了的情况。

2. 定位到onClickRow事件的影响
   后来才发现，真正的问题出在表格定义的onClickRow事件上！直接移除这个事件后，文本选中功能立刻恢复正常——但我又不能丢掉这个点击事件，业务上必须用到它。

最终解决方案：同时兼容点击事件和文本选中 #

要兼顾两者，只需要在onClickRow的处理函数里加个判断，区分用户是要点击行，还是要选中文本：

function onClickRow(row, $element) {
  // 当用户按住Ctrl键，或者触发选中文本的事件时，跳过行点击逻辑
  if (event.ctrlKey || event.type === 'selectstart') {
    return;
  }
  // 这里放你原本的行点击业务代码
  console.log('点击了目标行：', row);
}

再配合CSS确保文本选中的样式生效：

.table {
  -webkit-user-select: text;
  user-select: text;
}

这样调整后，既能正常触发行点击事件，又能自由选中文本，完美解决了问题！

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