如何用JavaScript检测HTML Popover是否处于打开状态？

当然可以通过JavaScript检测Popover的当前状态，以下是两种直接有效的方法：

方法一：读取元素的open属性 #

Popover API为弹窗元素提供了原生的open属性，它是一个布尔值，直接访问就能判断状态：

const popover = document.getElementById('pop');
const isOpen = popover.open;
console.log(isOpen); // 弹窗打开时返回true，关闭时返回false

方法二：使用matches()检测状态属性 #

弹窗打开时，浏览器会自动为其添加popover-open属性，我们可以用matches()方法检测这个属性是否存在：

const popover = document.getElementById('pop');
const isOpen = popover.matches('[popover-open]');
console.log(isOpen); // 结果同上

完整示例代码 #

结合你提供的HTML结构，添加状态检测的逻辑：

<button popovertarget="pop">Trigger the popover</button>
<div popover id="pop">This is the popover!</div>

<script>
const popover = document.getElementById('pop');
const triggerBtn = document.querySelector('button[popovertarget="pop"]');

// 点击触发按钮后立即检测状态
triggerBtn.addEventListener('click', () => {
  console.log('Popover状态：', popover.open);
});
</script>

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