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.";
    }
  });
}