使用<div role="button">调用Popover API失效，能否用非button元素触发？

原生的popovertarget属性仅对原生表单按钮元素生效（包括<button>、<input type="button">、<input type="submit">等），这是Popover API规范的设定。你用<div role="button">无法触发，正是因为它不是原生按钮元素，即使添加了ARIA角色也不会自动关联popovertarget的行为。

不过完全可以用非元素作为触发元素，需要通过JavaScript手动控制弹出框的状态，同时要保证无障碍访问性。

解决方案：手动绑定事件监听器 #

给非按钮元素添加点击事件，调用Popover元素的togglePopover()、showPopover()或hidePopover()方法，同时模拟原生按钮的键盘交互（回车/空格触发），确保键盘用户也能操作。

示例代码：

<div role="button" tabindex="0" style="border: 1px solid black; cursor: pointer;" id="divToggle">Fixed toggle (div)</div>
<button popovertarget="mypopover">Happy toggle (button)</button>

<div id="mypopover" popover>Popover content</div>

<script>
  const divToggle = document.getElementById('divToggle');
  const popover = document.getElementById('mypopover');

  // 点击事件触发切换
  divToggle.addEventListener('click', () => {
    popover.togglePopover();
  });

  // 键盘事件：回车/空格触发切换（模拟原生按钮行为）
  divToggle.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      popover.togglePopover();
    }
  });
</script>

关键注意点 #

• 添加tabindex="0"让非按钮元素可以被键盘聚焦，保证键盘用户能导航到该元素；
• 处理keydown事件，支持回车和空格触发，符合无障碍设计标准；
• role="button"要保留，让屏幕阅读器识别该元素为按钮。

内容的提问来源于stack exchange，提问作者Rogier de Ruijter