Bagaimana untuk mendengar acara butang tutup dalam JavaScript

JavaScript ialah salah satu alat berkuasa pengaturcaraan sisi klien, yang boleh digunakan untuk menambah pelbagai fungsi dan interaktiviti untuk meningkatkan pengalaman pengguna tapak web. Butang tutup adalah elemen penting dalam aplikasi web. Dalam artikel ini, kami akan membincangkan cara mendengar acara butang tutup dalam JavaScript dan menggunakannya untuk menambah fungsi pada aplikasi anda.

Butang tutup ialah butang yang ditetapkan di penjuru kanan sebelah atas tetingkap penyemak imbas. Apabila pengguna mengklik butang ini, tetingkap atau tab yang sedang dibuka akan ditutup dan proses semasa akan berakhir. Butang tutup biasanya digunakan dalam aplikasi web dan sambungan penyemak imbas.

Gunakan JavaScript untuk mendengar acara butang tutup

Mari kita lihat dahulu cara menggunakan JavaScript untuk mendengar acara butang tutup. Dalam JavaScript, kami menggunakan pendengar acara window.onbeforeunload untuk mengesan peristiwa klik butang tutup. Acara onbeforeunload dicetuskan sejurus sebelum tetingkap, tab atau penyemak imbas ditutup. Kita boleh menambah fungsi yang ingin kita laksanakan dalam fungsi panggil balik acara tersebut.

Berikut ialah penggunaan biasa:

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

Dalam kod di atas, kami menetapkan fungsi tanpa nama sebagai fungsi panggil balik acara window.onbeforeunload. Dalam fungsi tersebut, kami boleh menambah sebarang operasi, seperti membuka tetingkap baharu, mengingatkan pengguna untuk menyimpan data, dsb.

Melakukan tindakan dalam fungsi panggil balik

Sekarang, mari kita lihat contoh konkrit. Katakan kami sedang membina aplikasi beli-belah dalam talian dan kami perlu memastikan pelanggan telah menyimpan troli beli-belah mereka sebelum mereka meninggalkan halaman atau klik butang tutup. Untuk mencapai matlamat ini, kita boleh menggunakan kod berikut:

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

Dalam kod ini, kami mula-mula mendapatkan kandungan troli beli-belah menggunakan localStorage. Dalam fungsi panggil balik, kami menggunakan pernyataan if untuk menyemak sama ada terdapat item dalam troli beli-belah. Jika terdapat item dalam troli, kami memaparkan tetingkap peringatan kepada pengguna untuk menggesa mereka memastikan mereka telah menyimpan troli mereka.

Nota: Apabila anda melampirkan fungsi pada acara onbeforeunload, penyemak imbas memberitahu pengguna bahawa ia cuba menutup tetingkap dan bertanya kepada mereka sama ada mereka pasti akan keluar. Pengguna mempunyai pilihan untuk kekal di halaman atau terus menutup tetingkap. Jika anda tidak menambahkannya dalam fungsi panggil balik acara onbeforeunload, acara itu tidak akan dicetuskan.

Acara ini juga digunakan untuk menutup tab penyemak imbas. Hanya gunakan acara onbeforeunload dalam halaman Peristiwa ini hanya akan dicetuskan apabila pengguna meninggalkan halaman.

Ringkasan

Dalam artikel ini, kami membincangkan cara mendengar acara butang tutup dalam JavaScript dan menambah fungsi dalam aplikasi web anda. Kami menggunakan pendengar acara window.onbeforeunload untuk memantau acara dan melaksanakan tindakan yang diperlukan dalam fungsi panggil balik. Selain itu, apabila anda melampirkan fungsi pada acara onbeforeunload, penyemak imbas memberitahu pengguna bahawa percubaan sedang dibuat untuk menutup tetingkap dan bertanya kepada mereka sama ada mereka pasti akan pergi.

Ingat bahawa apabila menggunakan acara onbeforeunload, pastikan kod anda tidak mengganggu atau mengganggu pengalaman menyemak imbas pengguna. Fikirkan dengan teliti tentang perasaan pengguna anda sebelum anda cuba menambah fungsi.

Atas ialah kandungan terperinci Bagaimana untuk mendengar acara butang tutup dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!