ToggleEvent: source-Eigenschaft

Eine Element-Objektinstanz oder null, wenn das Popover nicht durch ein Steuerelement aktiviert wurde.

Ein <button>-Element kann als Popover-Steuerung festgelegt werden, indem die id des Popover-Elements im commandfor- oder popovertarget-Attribut angegeben wird (wenn der Button mit <input type="button"> spezifiziert wird, funktioniert nur das popovertarget-Attribut).

Wenn das toggle-Ereignis auf dem Popover ausgelöst wird, enthält die source-Eigenschaft des ToggleEvent-Ereignisobjekts eine Referenz auf den Popover-Steuerungsbutton, der das Umschalten initiiert hat. Dies ist nützlich, um unterschiedlichen Code als Reaktion auf das toggle-Ereignis auszuführen, abhängig davon, welches Steuerelement es initiiert hat (siehe ein Beispiel).

Bevor die source-Eigenschaft verfügbar war, mussten Entwickler die Funktionalität des command-Attributs von Grund auf neu implementieren, um eine ähnliche Kennung bereitzustellen, und dann mit JavaScript überwachen, welcher Button das Popover aufgerufen hat. Zusätzlich bestand die Gefahr, dass solche JavaScript-Aufgaben das Anzeigen oder Verbergen des Popovers blockieren. Das toggle-Ereignis ist asynchron und vermeidet daher dieses Problem.

Wenn das Popover nicht durch einen Steuer-Button aktiviert wurde – zum Beispiel, wenn das Popover mithilfe einer JavaScript-Methode wie HTMLElement.togglePopover() gesteuert wird – gibt die source-Eigenschaft null zurück.

Diese Demo zeigt, wie die source-Eigenschaft verwendet wird, um je nach dem verwendeten Steuerschalter eine andere Aktion durchzuführen, um ein Popover zu schließen.

HTML

Unser Markup enthält ein <button>, ein <p> und ein <div>-Element. Das <div> ist als auto-Popover gekennzeichnet, und der Button ist mit den Attributen commandfor und command als Steuerung für das Anzeigen des Popovers gekennzeichnet.

Das Popover enthält eine Überschrift, die den Benutzer fragt, ob er einen Keks möchte, und zwei Buttons, die ihm erlauben, "ja" oder "nein" auszuwählen. Jeder dieser Buttons ist als Steuerung zum Verbergen des Popovers festgelegt.

<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

In unserem Skript beginnen wir damit, Referenzen auf die "ja" und "nein" Buttons, das Popover und das Ausgabeelement <p> zu erhalten.

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

Dann fügen wir eine Funktionsüberprüfung hinzu, um zu erkennen, ob das HTML command-Attribut und die source-Eigenschaft unterstützt werden. Falls eines von beiden nicht unterstützt wird, geben wir eine entsprechende Nachricht im Ausgabeelement <p> aus. Falls beide unterstützt werden, fügen wir dem Popover einen toggle-Ereignislistener hinzu. Beim Auslösen wird überprüft, ob der "ja" oder "nein" Button verwendet wurde, um das Popover umzuschalten (zu verbergen); eine entsprechende Nachricht wird in jedem Fall im Ausgabeelement <p> ausgegeben.

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

Ergebnis

• Popover API