Mekanisme gelembung JS mengacu pada jika suatu elemen mendefinisikan peristiwa A, seperti acara klik.
Seperti yang ditunjukkan dalam contoh berikut:
Salinan kode adalah sebagai berikut:
<Html>
<script type = "text/javascript" src = "jQuery-1.7.1.js"> </script>
<script>
fungsi ialertDouble (e) {
alert ('innerdouble');
StopBubble (E);
}
function ialertTree (e) {
waspada ('InnerThree');
stopbubbledouble (e);
}
function stopBubble (e) {
var evt = e || window.event;
evt.stoppropagation? evt.stoppropagation () :( evt.cancelbubble = true); // hentikan gelembung agar tidak membengkak;
}
fungsi stopbubbledouble (e) {
var evt = e || window.event;
evt.stoppropagation? evt.stoppropagation () :( evt.cancelbubble = true); // hentikan gelembung agar tidak membengkak;
evt.preventdefault (); // blokir perilaku default browser sehingga tautan tidak akan melompat
}
$ (function () {
// Metode 1
//$('#jQueryTest').click(function(event) {
// peringatan ('Innerfour');
// event.stoppropagation ();
// event.preventdefault ();
//});
// Metode 2
$ ('#jQueryTest'). Klik (function () {
alert ('Innerfour');
mengembalikan false;
});
});
</script>
<Div onClick = "waspada ('tanpa');"> tanpa
<Div onClick = "waspada ('tengah');"> tengah
<Div onClick = "Alert ('Inner');"> Inner </Div>
<Div onClick = "IalertDouble (Event)"> Innerdouble </div>
<p> <a href = 'http: //www.baidu.com' onclick = "ialertThree (event)"> INNERTHREE </a> </p>
<p id = 'jQueryTest'> <a href = 'http: //www.baidu.com'> Innerfour </a> </p>
</div>
</div>
</html>
Saat Anda mengklik bagian dalam, 'dalam', 'tengah' dan 'tanpa' akan muncul secara bergantian. Ini adalah gelembung acara.
Berbicara secara intuitif, ini adalah masalahnya, karena area terdalam ada di simpul induk.
Faktanya, berkali -kali, kami tidak ingin acara menggelegak, karena ini akan memicu beberapa peristiwa pada saat yang sama.
Berikutnya: Mari klik Innerdouble. Anda akan menemukan bahwa dia tidak menggelegak karena dia menyebut metode stopbubble () dalam metode yang disebut ialertDouble ().
Tetapi jika itu adalah tautan, kami akan menemukan bahwa itu juga akan mencegah gelembung, tetapi akan melompat, yang merupakan perilaku default browser. Itu perlu diblokir dengan menggunakan metode preventdefault (). Untuk detailnya, Anda dapat memeriksa ialertThree ().
Saat ini, orang -orang arus utama menggunakan jQuery untuk mengikat acara klik, yang jauh lebih sederhana.
Kita dapat lulus di acara parameter saat mengklik acara, dan kemudian secara langsung
event.stoppropagation ();
event.preventdefault (); // tidak diperlukan tautan untuk menambahkan ini.
Itu saja.
Kerangka kerja itu bagus, tetapi sebenarnya ada yang lebih sederhana.
[Lihat kode terperinci di atas, ingatlah untuk memuat jQuery.js. 】
Bahkan, Anda juga dapat menambahkan penilaian ke setiap acara klik:
Salinan kode adalah sebagai berikut:
$ ('#id'). Klik (fungsi (acara) {
if (event.target == ini) {
// Lakukan sesuatu
}
})
Analisis: Acara variabel di event handler menyimpan objek acara. Properti Event.target memegang elemen target acara. Properti ini ditentukan dalam API DOM, tetapi tidak diimplementasikan oleh semua browser. JQuery membuat ekstensi yang diperlukan ke objek acara ini sehingga properti ini dapat digunakan di browser apa pun. Dengan .Target, dimungkinkan untuk menentukan elemen dalam DOM yang pertama kali menerima acara (mis. Elemen yang sebenarnya diklik). Selain itu, kita tahu bahwa ini mengacu pada elemen DOM yang menangani acara, sehingga kita dapat menulis kode di atas.
Namun, disarankan untuk menggunakan pengembalian palsu, jika jQuery mengikat acara.