原生HTML Popover点击按钮可打开但无法关闭的问题求助

问题出在原生Popover的默认行为和你的代码逻辑冲突：当Popover处于打开状态时，点击触发按钮会先触发Popover的「外部点击自动关闭」机制，紧接着你的代码又调用了togglePopover()，相当于先关闭再立刻打开，所以看起来按钮无法关闭Popover。

下面是两种可行的修复方案：

方案一：阻止事件冒泡 #

在函数开头添加event.stopPropagation()，阻止事件触发Popover的外部关闭逻辑，让togglePopover()能正常执行切换：

function handlePopover(event, id) {
  // 阻止事件冒泡，避免触发Popover的外部关闭逻辑
  event.stopPropagation();
  
  const popover = document.getElementById(id);
  if (!popover) return;

  const rect = event.target.getBoundingClientRect();
  popover.style.left = `${rect.left + 10}px`;
  popover.style.top = `${rect.top + 10}px`;

  popover.togglePopover();
}

方案二：手动判断状态控制显示/隐藏 #

不依赖togglePopover()，而是通过popover.matches(':popover-open')判断当前状态，手动调用showPopover()或hidePopover()：

function handlePopover(event, id) {
  const popover = document.getElementById(id);
  if (!popover) return;

  const rect = event.target.getBoundingClientRect();
  popover.style.left = `${rect.left + 10}px`;
  popover.style.top = `${rect.top + 10}px`;

  if (popover.matches(':popover-open')) {
    popover.hidePopover();
  } else {
    popover.showPopover();
  }
}

两种方案都能解决问题，方案一更简洁，方案二逻辑更直观，可根据需求选择。

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