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”彈出視窗也可以透過點選彈出視窗文字邊界外部來關閉。