HTMLButtonElement：popoverTargetAction 属性

基线 2024

新可用

自 2024 年 4 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能无法在较旧的设备或浏览器中使用。

popoverTargetAction 属性是 HTMLButtonElement 接口的一部分，用于获取和设置对由按钮控制的弹出窗口元素执行的操作（"hide"、"show" 或 "toggle"）。

它反映了 popovertargetaction HTML 属性的值。

值

一个枚举值。可能的值为

"hide": 按钮将隐藏显示的弹出窗口。如果尝试隐藏已隐藏的弹出窗口，则不会执行任何操作。
"show": 按钮将显示隐藏的弹出窗口。如果尝试显示已显示的弹出窗口，则不会执行任何操作。
"toggle": 按钮将在显示和隐藏之间切换弹出窗口。如果弹出窗口隐藏，则将其显示；如果弹出窗口显示，则将其隐藏。如果未设置 popoverTargetAction，则 "toggle" 是控制按钮将执行的默认操作。

示例

此示例演示了使用 popoverTargetAction 属性设置“toggle”值的弹出窗口 API 的基本用法。popover 属性设置为 "auto"，因此可以通过单击弹出窗口区域外部关闭（“轻触关闭”）弹出窗口。

首先，我们定义一个 HTML <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 HTMLElement.prototype.hasOwnProperty("popover");
}

如果支持弹出窗口 API，则代码将 <div> 元素的 popover 属性设置为 "auto"，并将其设为切换按钮的弹出窗口目标。然后，我们将 <button> 的 popoverTargetAction 设置为 "toggle"。如果不受支持弹出窗口 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;
}

注意：弹出窗口元素默认隐藏，但如果不受支持 API，您的元素将“照常”显示。

您可以尝试以下示例。通过切换按钮来显示和隐藏弹出窗口。还可以通过在弹出窗口文本范围外选择来“轻触关闭”"auto" 弹出窗口。

此示例演示如何使用 popoverTargetAction 属性的 "show" 和 "hide" 值。

代码与上一个示例几乎相同，只是有两个 <button> 元素，并且弹出窗口设置为 "manual"。必须显式关闭手动弹出窗口，并且不能通过在弹出窗口区域外选择来“轻触关闭”。

html

<button id="showBtn">Show popover</button>
<button id="hideBtn">Hide popover</button>
<div id="mypopover">This is popover content!</div>

function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

const popover = document.getElementById("mypopover");
const showBtn = document.getElementById("showBtn");
const hideBtn = document.getElementById("hideBtn");

const popoverSupported = supportsPopover();

if (supportsPopover()) {
  // Set the <div> element be a manual popover
  popover.popover = "manual";

  // Set the button targets to be the popover
  showBtn.popoverTargetElement = popover;
  hideBtn.popoverTargetElement = popover;

  // Set the target actions to be show/hide
  showBtn.popoverTargetAction = "show";
  hideBtn.popoverTargetAction = "hide";
} else {
  popover.textContent = "Popover API not supported.";
  showBtn.hidden = true;
  hideBtn.hidden = true;
}