JavaScript点击外部隐藏元素后，图标需双击才显示的问题解决

问题现象 #

点击外部区域可隐藏notifications-container元素，但点击显示该元素的图标时，首次点击无反应，必须双击才能重新显示。

原实现代码 #

const onClickOutside = (e) => {
const notificationsContainer = document.getElementById('notifications-container')
  if (!e.target.id.includes(notificationsContainer)) {
    notificationsContainer.style.display = 'none'
  }
};

window.addEventListener("click", onClickOutside);

问题原因 #

1. 判断逻辑完全错误：e.target.id.includes(notificationsContainer)这行逻辑混乱——notificationsContainer是DOM元素对象，e.target.id是字符串类型，字符串无法包含DOM元素，因此这个判断永远返回false。也就是说，任何点击都会触发容器隐藏操作，包括点击显示图标的时候。
2. 事件冲突：第一次点击图标时，图标自身的显示逻辑刚把容器设为显示，紧接着window的点击事件触发，错误地将容器再次隐藏，导致视觉上无反应；第二次点击时，容器已经处于隐藏状态，隐藏操作不生效，图标显示逻辑正常执行，容器才会显示。

修复方案 #

修复后的代码 #

// 提前获取DOM元素
const notificationsContainer = document.getElementById('notifications-container');
const toggleIcon = document.getElementById('toggle-notification-icon'); // 替换为你的图标实际ID

// 切换通知容器显示/隐藏的逻辑
const toggleNotifications = () => {
  const isHidden = notificationsContainer.style.display === 'none' || notificationsContainer.style.display === '';
  notificationsContainer.style.display = isHidden ? 'block' : 'none';
};

// 图标点击事件：阻止冒泡+切换显示状态
toggleIcon.addEventListener('click', (e) => {
  e.stopPropagation(); // 阻止事件冒泡到window，避免触发外部隐藏逻辑
  toggleNotifications();
});

// 外部点击隐藏容器的逻辑
const onClickOutside = (e) => {
  // 仅当点击目标不在容器内部，且不是切换图标时，才隐藏容器
  if (!notificationsContainer.contains(e.target) && e.target !== toggleIcon) {
    notificationsContainer.style.display = 'none';
  }
};

window.addEventListener("click", onClickOutside);

关键修复点 #

• 修正外部点击判断逻辑：使用DOM元素的contains方法，准确判断点击目标是否在容器内部，同时排除切换图标本身
• 阻止事件冒泡：在图标点击事件中调用e.stopPropagation()，避免点击图标时触发window层面的外部隐藏逻辑
• 抽离切换逻辑：将显示/隐藏的逻辑封装成独立函数，代码更易维护

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