DiepopoverTargetAction-Eigenschaft derHTMLInputElement-Schnittstelle ruft die Aktion ab bzw. legt diese fest, die auf ein Popover-Element angewendet werden soll ("hide","show" oder"toggle"), das durch ein<input>-Element vom Typtype="button" gesteuert wird.

Sie spiegelt den Wert despopovertargetaction-HTML-Attributs wider.

Wert

Ein enumerierter Wert. Mögliche Werte sind:

"hide"

Der Button wird ein gezeigtes Popover ausblenden. Wenn Sie versuchen, ein bereits ausgeblendetes Popover auszublenden, wird keine Aktion ausgeführt.

"show"

Der Button wird ein ausgeblendetes Popover anzeigen. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion ausgeführt.

"toggle"

Der Button wird ein Popover zwischen Anzeige und Ausblenden umschalten. Wenn das Popover ausgeblendet ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es ausgeblendet. WennpopoverTargetAction nicht gesetzt ist, ist"toggle" die Standardaktion, die vom Steuer-Button ausgeführt wird.

Beispiele

Popover-Aktion umschalten mit einem automatischen Popover

Dieses Beispiel zeigt die grundlegende Verwendung der Popover-API mit einem auf "toggle" gesetzten Wert für diepopoverTargetAction-Eigenschaft.Daspopover-Attribut ist auf"auto" gesetzt, sodass das Popover durch Klicken außerhalb des Popover-Bereichs geschlossen ("light-dismissed") werden kann.

Zuerst definieren wir ein<input> vomtype="button", das wir verwenden, um das Popover anzuzeigen und auszublenden, und ein<div>, das das Popover sein wird.In diesem Fall setzen wir daspopovertargetaction-HTML-Attribut nicht auf den Button oder daspopover-Attribut auf das<div>, da wir dies programmatisch tun werden.

<input type="button" value="Toggle popover" /><div>This is popover content!</div>

Der JavaScript-Code erhält zuerst eine Referenz auf die<div>- und<input>-Elemente.Er definiert dann eine Funktion, um die Unterstützung für das Popover zu überprüfen.

const popover = document.getElementById("mypopover");const toggleBtn = document.getElementById("toggleBtn");// Check for popover API support.function supportsPopover() {  return Object.hasOwn(HTMLElement.prototype, "popover");}

Wenn die Popover-API unterstützt wird, setzt der Code daspopover-Attribut des<div>-Elements auf"auto" und macht es zum Popover-Ziel des Umschaltbuttons.Wir setzen dann diepopoverTargetAction des Buttons auf"toggle".Wenn die Popover-API nicht unterstützt wird, ändern wir den Textinhalt des<div>-Elements, um dies anzuzeigen, und blenden den Umschaltbutton aus.

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;}

Sie können das folgende Beispiel ausprobieren.Zeigen und verbergen Sie das Popover, indem Sie den Button umschalten.Das "auto"-Popover kann auch durch Auswahl außerhalb der Grenzen des Popover-Textes geschlossen werden.

Show/hide Popover-Aktion mit einem manuellen Popover

Dieses Beispiel zeigt, wie die"show"- und"hide"-Werte derpopoverTargetAction-Eigenschaft verwendet werden.

Der Code ist nahezu identisch mit dem vorherigen Beispiel, außer dass es zwei<button>-Elemente gibt und das Popover auf"manual" gesetzt ist.Einmanual-Popover muss explizit geschlossen werden und kann nicht durch Auswahl außerhalb des Popover-Bereichs "leicht entlassen" werden.

<input type="button" value="Show popover" /><input type="button" value="Hide popover" /><div>This is popover content!</div>

function supportsPopover() {  return Object.hasOwn(HTMLElement.prototype, "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;}

Das Popover kann durch Auswahl des "Show popover"-Buttons angezeigt und mit dem "Hide popover"-Button geschlossen werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• popover-HTML-Globalattribut
• Popover API