表格行点击跳转：如何区分纯click与伴随文本选择的click事件？

方法一：结合mousedown记录初始选中状态，click时判断差异 #

在表格行的鼠标按下事件中记录当前选中内容，点击事件触发时对比状态变化，以此区分是否为纯点击：

let initialSelection = '';

document.querySelectorAll('tr').forEach(row => {
  row.addEventListener('mousedown', () => {
    // 记录鼠标按下时的选中文本
    initialSelection = window.getSelection().toString().trim();
  });

  row.addEventListener('click', () => {
    const currentSelection = window.getSelection().toString().trim();
    // 两种场景不触发跳转：
    // 1. 点击后存在选中内容（用户刚选完文本）
    // 2. 点击前有选中、点击后无选中（用户点击取消选中）
    if (currentSelection !== '' || (initialSelection !== '' && currentSelection === '')) {
      return;
    }
    // 执行页面跳转逻辑
    window.location.href = row.dataset.href;
  });
});

方法二：利用click事件的detail属性快速判断 #

浏览器click事件的detail属性可辅助判断：纯点击的detail值为1，而伴随文本选中/取消选中的点击，detail通常为0。该方法更简洁：

document.querySelectorAll('tr').forEach(row => {
  row.addEventListener('click', (e) => {
    // detail为0时跳过跳转逻辑
    if (e.detail === 0) return;
    // 执行页面跳转
    window.location.href = row.dataset.href;
  });
});

注意事项 #

• 方法二兼容性较好，适用于绝大多数普通场景，但快速连续点击等特殊情况可能出现偏差；
• 方法一逻辑更严谨，能覆盖用户先选文本再点击空白取消选中的边缘场景。

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