父级表格重写箭头键致子搜索框光标无法移动，如何阻止事件传播？

核心思路 #

给搜索框绑定键盘事件，在事件触发时阻止其向上冒泡到父表格，让输入框自身处理箭头键的光标移动逻辑，而非被表格的单元格导航逻辑拦截。

具体实现步骤 #

1. 定位搜索框元素

如果搜索框是静态存在的，直接通过选择器获取：

const searchInput = document.querySelector('.cell-search-input'); // 替换为你的搜索框选择器

如果搜索框是点击单元格后动态生成的，需要通过事件委托监听焦点事件来捕获：

// 替换为你的表格选择器
const parentTable = document.querySelector('.external-library-table');

2. 绑定键盘事件并阻止传播

• 静态搜索框的处理：

searchInput.addEventListener('keydown', (e) => {
  // 阻止事件冒泡到父表格，拦截表格的箭头键逻辑
  e.stopPropagation();
});

• 动态搜索框的处理（避免重复绑定）：

parentTable.addEventListener('focus', (e) => {
  // 判断触发焦点的元素是目标搜索框
  if (e.target.matches('.cell-search-input')) {
    const handleKeydown = (ke) => ke.stopPropagation();
    
    e.target.addEventListener('keydown', handleKeydown);
    
    // 搜索框失去焦点时移除事件监听，防止内存泄漏
    e.target.addEventListener('blur', function() {
      this.removeEventListener('keydown', handleKeydown);
    });
  }
}, true); // 使用捕获阶段确保优先触发

额外说明 #

• 如果表格是通过事件捕获方式绑定的键盘逻辑，可尝试用e.stopImmediatePropagation()替代stopPropagation()，确保彻底阻止表格的事件处理器触发。
• 无需针对特定箭头键做过滤，直接阻止所有键盘事件冒泡即可——输入框本身会正确处理光标移动、字符输入等逻辑。

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