JavaScript で閉じるボタン イベントをリッスンする方法

JavaScript はクライアント側プログラミングの強力なツールの 1 つであり、さまざまな機能や対話性を追加して Web サイトのユーザー エクスペリエンスを向上させるために使用できます。閉じるボタンは、Web アプリケーションの重要な要素です。この記事では、JavaScript で閉じるボタン イベントをリッスンし、それを使用してアプリケーションに機能を追加する方法について説明します。

閉じるボタンは、ブラウザウィンドウの右上隅に設定されているボタンです。ユーザーがこのボタンをクリックすると、現在開いているウィンドウまたはタブが閉じられ、現在のプロセスが終了します。閉じるボタンは、Web アプリケーションやブラウザ拡張機能でよく使用されます。

JavaScript を使用して閉じるボタン イベントをリッスンする

まず、JavaScript を使用して閉じるボタン イベントをリッスンする方法を見てみましょう。 JavaScript では、window.onbeforeunload イベント リスナーを使用して、閉じるボタンのクリック イベントを検出します。 onbeforeunload イベントは、ウィンドウ、タブ、またはブラウザーが閉じる直前に発生します。イベントのコールバック関数に実行したい機能を追加できます。

以下は一般的な使用法です:

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

上記のコードでは、無名関数を window.onbeforeunload イベントのコールバック関数として設定します。この関数には、新しいウィンドウを開く、データを保存するようユーザーに通知するなど、任意の操作を追加できます。

コールバック関数で操作を実行する

次に、具体的な例を見てみましょう。オンライン ショッピング アプリケーションを構築していて、顧客がページを離れる前、または閉じるボタンをクリックする前に、ショッピング カートを保存していることを確認する必要があるとします。これを実現するには、次のコードを使用します。

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

このコードでは、まず localStorage を使用してショッピング カートの内容を取得します。コールバック関数では、if ステートメントを使用して、ショッピング カートに商品があるかどうかを確認します。カートに商品がある場合は、ユーザーにリマインダー ウィンドウが表示され、カートを保存したことを確認するよう求められます。

注: onbeforeunload イベントに関数をアタッチすると、ブラウザはユーザーにウィンドウを閉じようとしていることを通知し、このまま終了するかどうかを尋ねます。ユーザーには、ページに留まるかウィンドウを閉じ続けるかを選択できます。 onbeforeunload イベント コールバック関数に追加しないと、イベントは発生しません。

このイベントは、ブラウザーのタブを閉じる場合にも適用されます。ページ内で onbeforeunload イベントを使用するだけです。このイベントは、ユーザーがページを離れたときにのみトリガーされます。

概要

この記事では、JavaScript で閉じるボタン イベントをリッスンし、Web アプリケーションに機能を追加する方法について説明しました。 window.onbeforeunload イベント リスナーを使用してイベントを監視し、コールバック関数で必要なアクションを実行します。さらに、onbeforeunload イベントに関数を付加すると、ブラウザはウィンドウを閉じようとしていることをユーザーに通知し、このまま終了するかどうかを尋ねます。

onbeforeunload イベントを使用するときは、コードがユーザーのブラウジング エクスペリエンスを妨げたり中断したりしないように注意してください。機能を追加する前に、ユーザーがどう感じるかを慎重に考えてください。

以上がJavaScript で閉じるボタン イベントをリッスンする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。