Bagaimana untuk mengelakkan acara menggelegak dalam javascript

Peristiwa menggelegak dalam JavaScript ialah mekanisme penyebaran peristiwa biasa Ini bermakna apabila peristiwa pada elemen dicetuskan, ia akan merambat ke atas (nod induk) sehingga ia mencapai nod akar dokumen Proses ini seperti gelembung muncul dan kemudian merebak ke luar, jadi ia dipanggil acara menggelegak. Pelaksanaan mekanisme menggelegak acara mempunyai banyak faedah Sebagai contoh, pengendali acara boleh ditambahkan pada elemen induk dan bukannya setiap elemen anak, dengan itu mengurangkan lebihan kod dan meningkatkan kebolehselenggaraan dan kebolehgunaan semula. Walau bagaimanapun, dalam beberapa kes, kita mungkin perlu menghalang peristiwa unsur daripada menggelegak untuk mengelak daripada menjejaskan unsur lain. Artikel ini akan memperkenalkan cara untuk menghalang acara daripada menggelegak dalam JavaScript.

1. Tangkapan acara dan menggelegak acara

Sebelum kita membincangkan acara menggelegak secara mendalam, kita perlu memahami dua peringkat penyebaran acara yang berbeza: tangkapan acara dan acara menggelegak. Tangkapan peristiwa disebarkan ke bawah dari nod akar dokumen ke elemen sasaran, manakala gelembung acara disebarkan ke atas daripada elemen sasaran ke nod akar dokumen. Dalam model acara DOM, acara mula-mula diserahkan kepada elemen paling luar elemen sasaran, dan kemudian disebarkan ke dalam sehingga peristiwa pada elemen sasaran dicetuskan, dan kemudian peristiwa itu disebarkan ke luar daripada elemen sasaran, sehingga ke dokumen.

2. Kaedah untuk mengelakkan peristiwa menggelegak

Dalam JavaScript, kita boleh menggunakan kaedah preventDefault() dan stopPropagation() untuk menghalang penyebaran peristiwa. Kaedah Event.preventDefault() digunakan untuk menghalang tingkah laku lalai acara, seperti menghalang melompat ke halaman baharu apabila pautan diklik. Kaedah stopPropagation() digunakan untuk menghalang penyebaran peristiwa, dengan itu menghalang peristiwa menggelegak atau tangkapan peristiwa. Ia boleh dipanggil dalam pengendali acara untuk menghentikan penyebaran peristiwa menggelegak atau tangkapan acara.

1. Gunakan kaedah event.stopPropagation()

Kaedah ini boleh menghalang penyebaran lebih lanjut sesuatu peristiwa dan menghalang mana-mana elemen induk daripada menangkap peristiwa unsur lain. Apabila sesuatu peristiwa dicetuskan, ia berhenti menyebar lebih jauh dan pengendali acara lain tidak dipanggil.

Kod sampel adalah seperti berikut:

document.querySelector('#child').addEventListener('click', function(event) {
  console.log('child clicked');
  event.stopPropagation();
})

document.querySelector('#parent').addEventListener('click', function(event) {
  console.log('parent clicked');
})

Dalam contoh ini, apabila elemen anak diklik, acara berhenti dihantar dan pengendali acara elemen induk tidak dicetuskan.

2. Gunakan kaedah event.preventDefault()

Kaedah ini hanya menghalang kelakuan lalai acara, tetapi tidak menghalang acara daripada menggelegak. Kod sampel adalah seperti berikut:

document.querySelector('a').addEventListener('click', function(event) {
  console.log('link clicked');
  event.preventDefault();
})

document.querySelector('div').addEventListener('click', function(event) {
  console.log('div clicked');
})

Dalam contoh ini, apabila pautan diklik, pengendali acara mencetak mesej dan menghalang melompat ke halaman baharu. Walau bagaimanapun, ia masih akan diserahkan kepada pengendali acara elemen induk (elemen div).

3. Halang kejadian menggelegak dan gelagat lalai

Kadangkala, kita perlu menghalang gelagat lalai dan proses menggelegak sesuatu peristiwa pada masa yang sama. Dalam kes ini, kita boleh memanggil kaedah preventDefault() dan stopPropagation().

Kod sampel adalah seperti berikut:

document.querySelector('a').addEventListener('click', function(event) {
  console.log('link clicked');
  event.preventDefault();
  event.stopPropagation();
})

document.querySelector('div').addEventListener('click', function(event) {
  console.log('div clicked');
})

Dalam contoh ini, apabila pautan diklik, pengendali acara memanggil kaedah preventDefault() dan stopPropagation(), dengan itu menghentikan kaedah lalai tingkah laku acara dan Elakkan daripada menggelegak ke atas. Oleh itu, pengendali acara elemen div tidak dipanggil.

3. Ringkasan

Dalam artikel ini, kami memperkenalkan kaedah mencegah peristiwa menggelegak dalam JavaScript, iaitu menggunakan kaedah stopPropagation() dan preventDefault(). Kami juga membincangkan perbezaan antara acara menggelegak dan menangkap acara. Apabila kita perlu menghalang acara daripada menggelegak, kita boleh menggunakan kaedah stopPropagation() dan apabila kita perlu menghalang kelakuan lalai acara tersebut, kita boleh menggunakan kaedah preventDefault(). Dalam sesetengah kes, kita mungkin perlu menggunakan kedua-duanya untuk mengelakkan peristiwa menggelegak dan gelagat lalai untuk memenuhi keperluan kita.

Atas ialah kandungan terperinci Bagaimana untuk mengelakkan acara menggelegak dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!