如何控制同时触发的两个jQuery事件执行顺序并解决冲突

这问题我太熟了！本质是事件触发顺序搞的鬼——当你点击搜索结果的时候，浏览器会先触发输入框的blur事件（因为输入框失去了焦点），等blur里的代码把结果div隐藏了，后面的click事件根本找不到目标元素，自然就不执行了。下面给你几个实用的解决方案，按场景选就行：

方案1：用mousedown替代click事件（最直接） #

mousedown的触发时机比blur更早，能保证先拿到结果文本，再处理隐藏逻辑：

// 输入框失去焦点时隐藏结果
$('#search-input').on('blur', function() {
  $('#result-div').hide();
});

// 用mousedown代替click，确保先执行选择逻辑
$('#result-div .result-item').on('mousedown', function() {
  const selectedText = $(this).text().trim();
  console.log('选中的搜索结果：', selectedText);
  // 可选：手动触发隐藏，避免blur重复执行
  $('#result-div').hide();
});

⚠️ 注意：如果需要支持键盘选择（比如回车选中），还要额外监听keydown事件哦。

方案2：给blur加延迟，给click留执行时间 #

通过setTimeout延迟隐藏结果，让click事件有足够时间完成执行：

let blurDelayTimer;

// 输入框blur事件：延迟隐藏结果
$('#search-input').on('blur', function() {
  // 300ms是经验值，可根据视觉体验调整
  blurDelayTimer = setTimeout(() => {
    $('#result-div').hide();
  }, 300);
});

// 点击结果项时先清除延迟，再处理逻辑
$('#result-div .result-item').on('click', function() {
  const selectedText = $(this).text().trim();
  console.log('选中的搜索结果：', selectedText);
  // 清除blur的延迟定时器，避免结果被意外隐藏
  clearTimeout(blurDelayTimer);
  // 手动隐藏结果
  $('#result-div').hide();
});

这个方案兼容原生click行为，但延迟时间需要权衡——太短可能还是会冲突，太长会有轻微的视觉延迟。

方案3：事件委托+焦点判断（适合动态生成的结果） #

如果你的搜索结果是AJAX动态加载的，优先用事件委托，同时在blur里判断焦点是否转移到了结果区域，避免误隐藏：

// 事件委托监听结果项点击（支持动态生成的元素）
$(document).on('click', '#result-div .result-item', function() {
  const selectedText = $(this).text().trim();
  console.log('选中的搜索结果：', selectedText);
  $('#result-div').hide();
});

// 输入框blur事件：判断焦点是否在结果区域内
$('#search-input').on('blur', function() {
  // 用setTimeout(0)让浏览器先完成焦点切换，再判断
  setTimeout(() => {
    const isFocusInResult = $('#result-div').has(document.activeElement).length;
    if (!isFocusInResult) {
      $('#result-div').hide();
    }
  }, 0);
});

这个方案最灵活，既能处理动态元素，又能精准控制隐藏时机，不会出现误操作。

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