当input获焦时，td元素的onclick事件首次点击不触发如何解决？

问题描述 #

我有一个<input>元素，当onchange、onkeydown等事件触发时，通过JavaScript执行搜索操作，生成结果<table>并使用position: absolute定位在<input>下方，这部分功能正常。

表格可点击单元格的创建代码如下：

let td = document.createElement ("td");
tr.appendChild (td);
td.appendChild (document.createTextNode (search_result.label));
td.onclick = create_click_handler (search_result);

问题：当<input>处于聚焦状态时，<td>的onclick事件仅在第二次点击时触发。操作流程为：输入搜索文本生成结果，首次点击<td>无反应，多次交替点击<input>和<td>后，再次点击<td>才会触发事件。通过Firefox调试器确认首次点击时onclick未触发，推测问题源于DOM而非JavaScript，且Firefox和Chrome表现一致。如何确保首次点击<td>就触发事件？

解决方案 #

这个问题的核心是输入框聚焦时，首次点击下拉表格单元格会先触发输入框的blur事件，若blur事件包含修改DOM的逻辑（比如隐藏/重建表格），会直接吞噬单元格的click事件。以下是几种可行的解决方式：

• 用mousedown替代click事件
  mousedown的触发时机早于blur，不会被输入框的失焦操作干扰。修改单元格的事件绑定：

  td.onmousedown = create_click_handler (search_result);
  

  若create_click_handler依赖click的特性，只需做简单适配即可，多数场景下可直接替换。

• 延迟执行blur事件的DOM操作
  如果blur事件必须保留（比如隐藏表格），用setTimeout延迟执行逻辑，让单元格的点击事件先完成：

  inputElement.addEventListener('blur', function() {
    setTimeout(() => {
      // 原blur处理逻辑，例如隐藏结果表格
      resultTable.style.display = 'none';
    }, 100);
  });
  

• 避免blur事件意外移除表格
  检查blur事件代码，确认是否直接删除了表格DOM。如果是，调整逻辑：仅当点击区域不在表格内时才隐藏/删除表格：

  inputElement.addEventListener('blur', function() {
    setTimeout(() => {
      // 检查当前焦点是否在表格范围内
      if (!resultTable.contains(document.activeElement)) {
        resultTable.style.display = 'none';
      }
    }, 0);
  });
  

• 谨慎阻止blur默认行为
  若输入框的blur事件无必须执行的逻辑，可在回调中添加event.preventDefault()，但注意这可能影响输入框的正常失焦行为，需确认无副作用后使用：

  inputElement.addEventListener('blur', function(e) {
    e.preventDefault();
  });
  

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