ToggleEvent: source 屬性

值

一個 Element 物件例項，如果彈出視窗不是由控制元件元素啟用的，則為 null。

描述

可以透過在 <button> 元素的 commandfor 或 popovertarget 屬性中指定彈出視窗元素的 id 來將其設定為彈出控制元件（如果按鈕使用 <input type="button"> 指定，則只有 popovertarget 屬性有效）。

當彈出視窗上觸發 toggle 事件時，ToggleEvent 事件物件的 source 屬性將包含一個指向觸發切換的彈出控制元件按鈕的引用。這對於根據觸發事件的控制元件執行不同的程式碼來響應 toggle 事件非常有用（參見示例）。

在 source 屬性可用之前，開發人員必須從頭開始重新實現 command 屬性的功能，以提供類似的識別符號，然後使用 JavaScript 監視它以瞭解哪個按鈕呼叫了彈出視窗。此外，此類 JavaScript 任務存在阻止彈出視窗顯示或隱藏的風險。toggle 事件是非同步的，因此避免了這個問題。

如果彈出視窗不是由控制元件按鈕啟用的——例如，如果彈出視窗正在使用 JavaScript 方法（如 HTMLElement.togglePopover()）進行控制——則 source 屬性返回 null。

示例

基本的 `source` 用法

此演示展示瞭如何使用 source 屬性來執行不同的操作，具體取決於用於關閉彈出視窗的控制元件按鈕。

HTML

我們的標記包含一個 <button>、一個 <p> 和一個 <div> 元素。<div> 被指定為 auto 彈出視窗，按鈕透過使用 commandfor 和 command 屬性指定為顯示彈出視窗的控制元件。

彈出視窗包含一個標題，詢問使用者是否想要餅乾，以及兩個按鈕，允許他們選擇“是”或“否”。每個按鈕都被指定為隱藏彈出視窗的控制元件。

html

<button commandfor="popover" command="show-popover">
  Select cookie preference
</button>
<p id="output"></p>
<div id="popover" popover="auto">
  <h3>Would you like a cookie?</h3>
  <button id="yes" commandfor="popover" command="hide-popover">Yes</button>
  <button id="no" commandfor="popover" command="hide-popover">No</button>
</div>

html {
  font-family: sans-serif;
}

[popover] {
  border: 1px solid grey;
  padding: 10px 20px;
  border-radius: 5px;
}

[popover] h3 {
  margin: 0 0 10px;
}

JavaScript

在我們的指令碼中，我們首先獲取對“是”和“否”按鈕、彈出視窗以及輸出 <p> 的引用。

const yesBtn = document.getElementById("yes");
const noBtn = document.getElementById("no");
const popover = document.getElementById("popover");
const output = document.getElementById("output");

然後，我們新增一些功能檢測，以檢測是否支援 HTML command 屬性以及是否支援 source 屬性。如果其中任何一個不支援，我們會在輸出 <p> 中輸出一條適當的訊息。如果兩者都支援，我們會在彈出視窗上新增一個 toggle 事件監聽器。當觸發時，它會檢查是使用了“是”還是“否”按鈕來切換（隱藏）彈出視窗；在這種情況下，會在輸出 <p> 中列印一條適當的訊息。

if (yesBtn.command === undefined) {
  output.textContent = "Popover control command attribute not supported.";
} else {
  popover.addEventListener("toggle", (event) => {
    if (event.source === undefined) {
      output.textContent = "ToggleEvent.source not supported.";
    } else if (event.source === yesBtn) {
      output.textContent = "Cookie set!";
    } else if (event.source === noBtn) {
      output.textContent = "No cookie set.";
    }
  });
}