So hören Sie Ereignisse zum Schließen von Schaltflächen in JavaScript ab

JavaScript ist eines der leistungsstarken Tools der clientseitigen Programmierung, mit dem verschiedene Funktionen und Interaktivität hinzugefügt werden können, um das Benutzererlebnis der Website zu verbessern. In Webanwendungen ist der Schließen-Button ein wichtiges Element. In diesem Artikel besprechen wir, wie Sie das Schließen-Schaltflächenereignis in JavaScript abhören und es verwenden, um Ihrer Anwendung Funktionalität hinzuzufügen.

Die Schaltfläche „Schließen“ ist eine Schaltfläche in der oberen rechten Ecke des Browserfensters. Wenn der Benutzer auf diese Schaltfläche klickt, wird das aktuell geöffnete Fenster oder die aktuell geöffnete Registerkarte geschlossen und der aktuelle Vorgang beendet. Schaltflächen zum Schließen werden häufig in Webanwendungen und Browsererweiterungen verwendet.

Verwenden Sie JavaScript, um Ereignisse der Schaltfläche „Schließen“ abzuhören.

Lassen Sie uns zunächst einen Blick darauf werfen, wie Sie JavaScript verwenden, um Ereignisse der Schaltfläche „Schließen“ abzuhören. In JavaScript verwenden wir den Ereignis-Listener window.onbeforeunload, um das Klickereignis der Schaltfläche „Schließen“ zu erkennen. Das onbeforeunload-Ereignis wird ausgelöst, kurz bevor das Fenster, die Registerkarte oder der Browser geschlossen wird. Wir können die Funktionalität, die wir ausführen möchten, in der Rückruffunktion des Ereignisses hinzufügen.

Die folgenden werden häufig verwendet:

window.onbeforeunload = function() {
  // 您想要运行的功能
};

Im obigen Code richten wir eine anonyme Funktion als Rückruffunktion für das window.onbeforeunload-Ereignis ein. In der Funktion können wir beliebige Vorgänge hinzufügen, z. B. das Öffnen eines neuen Fensters, die Erinnerung des Benutzers an das Speichern von Daten usw.

Vorgänge in Rückruffunktionen ausführen

Schauen wir uns nun ein konkretes Beispiel an. Nehmen wir an, wir erstellen eine Online-Shopping-Anwendung und müssen sicherstellen, dass der Kunde seinen Warenkorb gespeichert hat, bevor er die Seite verlässt oder auf die Schaltfläche „Schließen“ klickt. Um dies zu erreichen, können wir den folgenden Code verwenden:

window.onbeforeunload = function() {
  const cart = JSON.parse(localStorage.getItem("shoppingCart"));
  if (cart.length > 0) {
    alert("请确保您已保存购物车！");
  }
};

In diesem Code verwenden wir zunächst localStorage, um den Inhalt des Warenkorbs abzurufen. In der Callback-Funktion verwenden wir eine if-Anweisung, um zu prüfen, ob sich ein Artikel im Warenkorb befindet. Wenn sich Artikel im Warenkorb befinden, zeigen wir dem Benutzer ein Erinnerungsfenster an, um ihn aufzufordern, sicherzustellen, dass er seinen Warenkorb gespeichert hat.

Hinweis: Wenn Sie dem onbeforeunload-Ereignis eine Funktion hinzufügen, benachrichtigt der Browser den Benutzer darüber, dass er versucht, das Fenster zu schließen, und fragt ihn, ob er das Fenster wirklich verlassen möchte. Der Benutzer hat die Möglichkeit, auf der Seite zu bleiben oder das Fenster weiter zu schließen. Wenn Sie es nicht in der Rückruffunktion für das Ereignis onbeforeunload hinzufügen, wird das Ereignis nicht ausgelöst.

Dieses Ereignis gilt auch für das Schließen von Browser-Tabs. Verwenden Sie einfach das Ereignis onbeforeunload auf der Seite. Dieses Ereignis wird nur ausgelöst, wenn der Benutzer die Seite verlässt.

Zusammenfassung

In diesem Artikel haben wir besprochen, wie Sie auf Schließschaltflächenereignisse in JavaScript hören und Ihrer Webanwendung Funktionen hinzufügen. Wir verwenden den Ereignis-Listener window.onbeforeunload, um das Ereignis zu überwachen und die erforderlichen Aktionen in der Rückruffunktion auszuführen. Wenn Sie außerdem eine Funktion an das onbeforeunload-Ereignis anhängen, benachrichtigt der Browser den Benutzer darüber, dass versucht wird, das Fenster zu schließen, und fragt ihn, ob er das Fenster wirklich verlassen möchte.

Denken Sie daran, bei Verwendung des onbeforeunload-Ereignisses sicherzustellen, dass Ihr Code das Surferlebnis des Benutzers nicht beeinträchtigt oder unterbricht. Überlegen Sie sorgfältig, wie sich Ihre Benutzer fühlen werden, bevor Sie versuchen, Funktionen hinzuzufügen.

Das obige ist der detaillierte Inhalt vonSo hören Sie Ereignisse zum Schließen von Schaltflächen in JavaScript ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!