HTMLButtonElement: popoverTargetElement 属性

Baseline 2024 *

新推出

自 ⁨2024 年 4 月⁩ 起，此功能可在最新的设备和浏览器版本中运行。此功能可能不适用于较旧的设备或浏览器。

* 此特性的某些部分可能存在不同级别的支持。

HTMLButtonElement 接口的 popoverTargetElement 属性用于获取和设置由按钮控制的弹出窗口元素。

它是 popovertarget HTML 属性的 JavaScript 等效项。

使用 popoverTargetElement 属性在弹出窗口与其触发器按钮之间建立关联会产生两个额外的有用效果：

浏览器在弹出窗口和调用者之间创建隐式的 aria-details 和 aria-expanded 关系，并在显示时将弹出窗口放置在键盘焦点导航顺序中的逻辑位置。这使得弹出窗口对键盘和辅助技术 (AT) 用户更易于访问（另请参阅弹出可访问性功能）。
浏览器在两者之间创建了一个隐式锚点引用，使得使用 CSS 锚点定位来相对于其控件定位弹出窗口非常方便。有关更多详细信息，请参阅弹出锚点定位。

值

DOM 中弹出窗口元素的引用。

示例

本示例展示了 Popover API 的基本用法：将一个 <div> 元素设置为弹出窗口，然后将其设置为 <button> 的 popoverTargetElement。popover 属性设置为 "manual"，因此弹出窗口必须通过按钮关闭，而不能通过点击弹出窗口区域外的空白处进行“轻量级关闭”。

首先，我们定义一个 <button> 元素（用于显示和隐藏弹出窗口）和一个 <div> 元素（将成为弹出窗口）。在本例中，我们不在 <button> 上设置 popovertargetaction HTML 属性，也不在 <div> 上设置 popover 属性，因为我们将通过编程方式进行设置。

html

<button id="toggleBtn">Toggle popover</button>
<div id="mypopover">This is popover content!</div>

JavaScript 代码首先获取 <div> 和 <button> 元素的句柄。然后定义一个函数来检查是否支持弹出窗口。

const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

// Check for popover API support.
function supportsPopover() {
  return Object.hasOwn(HTMLElement.prototype, "popover");
}

如果支持 Popover API，代码会将 <div> 元素的 popover 属性设置为 "auto"，并使其成为切换按钮的弹出窗口目标。然后我们将 <button> 的 popoverTargetAction 设置为 "toggle"。如果不支持 Popover API，我们将 <div> 元素的文本内容更改为声明这一点，并隐藏切换按钮。

if (supportsPopover()) {
  // Set the <div> element to be an auto popover
  popover.popover = "auto";

  // Set the button popover target to be the popover
  toggleBtn.popoverTargetElement = popover;

  // Set that the button toggles popover visibility
  toggleBtn.popoverTargetAction = "toggle";
} else {
  popover.textContent = "Popover API not supported.";
  toggleBtn.hidden = true;
}

注意： popover 元素默认是隐藏的，但如果 API 不受支持，您的元素将“按原样”显示。

您可以尝试下面的示例。通过切换按钮来显示和隐藏弹出窗口。“auto”弹出窗口也可以通过点击弹出窗口文本边界外部来关闭。