Ada masalah gelembung acara dan event capture dalam acara JavaScript dan jQuery. Berikut ini adalah ringkasan terperinci dari dua masalah dan solusinya.
Gelembung acara adalah proses gelembung dari anak -anak ke node leluhur;
Penangkapan acara justru sebaliknya, dan merupakan proses dari node leluhur ke node anak -anak.
Berikan contoh acara klik jQuery:
Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<meta charset = "UTF-8">
<title> tes </iteme>
<head>
<skrip src = "http://code.jquery.com/jquery-latest.js"> </ptript>
<type skrip = "Teks/JavaScript">
$ (function () {
$ ('#clickme'). Klik (fungsi () {
waspada ('halo');
});
$ ('body'). klik (function () {
waspada ('baby');
});
});
</script>
</head>
<body>
<div>
<typon type = "tombol" id = "tombol2"> klik saya </button>
<tombol id = "clickme"> Klik </button>
</div>
</body>
</html>
Fenomena Bubble Event: Klik tombol "ID = ClickMe", dan dua kotak pop-up, "Hello" dan "Baby" akan muncul satu demi satu.
Analisis: Saat mengklik tombol "ID = ClickMe", acara klik yang terikat pada tombol dan tombol dan elemen induk tombol dipicu, sehingga dua kotak muncul satu demi satu, dan fenomena gelembung yang disebut terjadi.
Fenomena Capture Event: Jika Anda mengklik Div dan Tombol yang tidak mengikat Event Klik, kotak dialog "Bayi" akan muncul.
Dalam proyek yang sebenarnya, kami ingin mencegah gelembung acara dan penangkapan acara.
Bagaimana mencegah peristiwa menggelegak:
Metode 1: Return False di acara klik saat ini;
Salinan kode adalah sebagai berikut:
$ ('#clickme'). Klik (fungsi () {
waspada ('halo');
mengembalikan false;
});
Metode 2:
Salinan kode adalah sebagai berikut:
$ ('#clickme'). Klik (fungsi (acara) {
waspada ('halo');
var e = window.event || peristiwa;
if (e.stoppropagation) {// Jika objek acara disediakan, maka ini adalah browser non -e
e.Stoppropagation ();
}kalau tidak{
// cara yang kompatibel dengan IE untuk membatalkan gelembung acara
window.event.cancelbubble = true;
}
});
Tampaknya acara penangkapan tidak dapat diblokir