拖拽表格内input选文本至相邻单元格时，如何阻止行点击事件触发

问题原因 #

当你在input里拖拽选中文本，鼠标松开在相邻单元格时，浏览器会触发该单元格的click事件，由于这个单元格没有阻止事件冒泡，最终会传到行元素触发handleRowClick。这种场景属于拖拽选中文本后的误触发，而非真正的行点击操作。

解决方案 #

通过标记拖拽状态，在行点击事件中判断是否为拖拽导致的触发，从而跳过执行逻辑：

1. 新增拖拽状态标记与监听事件

let isDragging = false;

// 监听input的mousedown，标记开始拖拽
function handleInputMouseDown() {
  isDragging = true;
}

// 全局监听mouseup，标记拖拽结束
function handleGlobalMouseUp() {
  isDragging = false;
}

// 给input绑定mousedown事件
document.querySelector('input').addEventListener('mousedown', handleInputMouseDown);
// 给document绑定mouseup事件，确保拖拽结束后状态重置
document.addEventListener('mouseup', handleGlobalMouseUp);

2. 修改行点击事件逻辑

function handleRowClick() {
  // 如果是拖拽状态，直接返回，不执行行点击逻辑
  if (isDragging) {
    isDragging = false; // 重置状态，避免影响后续正常点击
    return;
  }
  console.log('click on row');
}

3. 优化后的完整代码

let isDragging = false;

function handleRowClick() {
  if (isDragging) {
    isDragging = false;
    return;
  }
  console.log('click on row');
}

function handleCellClick(e) {
  e.stopPropagation();
  console.log('click on cell');
}

function handleInputMouseDown() {
  isDragging = true;
}

function handleGlobalMouseUp() {
  isDragging = false;
}

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('input').addEventListener('mousedown', handleInputMouseDown);
  document.addEventListener('mouseup', handleGlobalMouseUp);
});

<table>
  <tr onclick="handleRowClick(event)">
    <td>COLUMN 1</td>
    <td onclick="handleCellClick(event)">
      <input value="random string" />
    </td>    
    <td>COLUMN 3</td>    
  </tr>
</table>

原理说明 #

• 通过mousedown标记拖拽开始，mouseup标记拖拽结束，确保能准确识别拖拽行为。
• 行点击事件触发时，先检查拖拽状态，若是拖拽导致的触发则直接返回，避免执行不必要的逻辑。
• 全局绑定mouseup是为了覆盖所有拖拽结束的场景（比如鼠标松开在页面任意位置）。

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