使用blur()实现点击弹窗外部隐藏时Toggle按钮无法切换问题求助

核心问题根因 #

• 普通div元素默认不支持聚焦，blur事件仅对可聚焦元素（如input、button、带tabindex属性的元素）生效，你未给#popup设置可聚焦属性，所以focus()和blur逻辑完全不生效
• 点击#toggle时事件触发顺序异常：如果弹窗已处于显示状态，点击toggle会先触发弹窗的失焦逻辑把弹窗隐藏，之后才执行toggle的点击回调，此时读取display自然是none，之后回调又把弹窗打开，就出现你看到的「弹窗实际显示但alert返回none」的现象
• 你之前用的mouseup外部关闭逻辑没有排除toggle元素，点击toggle时会先触发外部关闭逻辑隐藏弹窗，再触发toggle的点击逻辑重新显示弹窗，两个逻辑冲突导致效果异常

修正步骤 #

第一步：给弹窗添加可聚焦属性 #

在你的#popup元素上添加tabindex="-1"属性，该属性可以让普通元素支持JS调用聚焦，同时不会被键盘Tab键误触发聚焦：

<div id="popup" tabindex="-1">
  <!-- 你的弹窗内容 -->
</div>

第二步：替换逻辑代码，解决事件冲突 #

$(document).ready(function() {
  const $toggle = $('#toggle');
  const $popup = $('#popup');

  $toggle.click(function(e) {
    // 阻止点击事件冒泡到document，避免触发外部关闭逻辑
    e.stopPropagation();
    // 切换弹窗显示状态，比手动判断display更可靠
    $popup.toggle();
    if ($popup.is(':visible')) {
      $popup.focus();
    }
  });

  // 弹窗失焦关闭逻辑
  $popup.blur(function() {
    $(this).hide();
  });

  // 点击外部区域关闭逻辑
  $(document).click(function(e) {
    // 点击目标不是弹窗、不是弹窗子元素、不是toggle、不是toggle子元素时，才关闭弹窗
    if (
      !$popup.is(e.target) 
      && $popup.has(e.target).length === 0 
      && !$toggle.is(e.target) 
      && $toggle.has(e.target).length === 0
    ) {
      $popup.hide();
    }
  });
});

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