Jika Anda pernah berurusan dengan menu yang terbuka di klik, tetapi ingin mereka menutup ketika pengguna mengklik di luar area menu, inilah cara yang cukup sederhana untuk melakukannya. Saya menambahkan pendengar acara ke tubuh dokumen. Saat seseorang mengekliknya, kami mencari id target acara. Jika cocok dengan ID div kotak, maka jangan lakukan apapun. Jika tidak, tutup menu.
Mengambil itu sedikit lebih jauh, itu tidak efisien untuk meninggalkan pendengar acara klik di seluruh tubuh ketika tidak digunakan. Dalam hal ini, jika menu belum dibuka, tidak ada alasan untuk mendengarkan klik di luar menu. Tambahkan listener kejadian dalam callback dari div yang ditampilkan. Dalam nada yang sama, ketika div disembunyikan lagi, hapus event listener.
Tampilkan Div Klik di dalam kotak hitam, tidak ada yang terjadi. Klik di luar, ia menghilang $ ('# showbox'). Klik (function () {$ ('# bigbox'). Show (function () {document.body.addEventListener ('click', boxCloser, false);}) ;)); function boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('click', boxCloser, false); $ ('# bigbox'). hide (); }} Lihat contoh kerja
Juga pastikan Anda menyertakan jQuery karena beberapa fungsi di atas menggunakan pustaka.
