Bagaimana untuk Mencegah Penyebaran Acara dalam Elemen HTML Bersarang?

Mencegah Penyebaran Peristiwa dalam Elemen Bersarang

Apabila berurusan dengan elemen bersarang dalam HTML, mengurus penyebaran acara boleh menjadi penting. Dalam senario tertentu, anda mungkin mahu menghalang pengendali acara induk daripada melaksanakan apabila elemen anak diklik. Mari kita terokai contoh khusus untuk memahami cara ini boleh dicapai.

Pertimbangkan struktur pokok div: #a, #b dan #c, dengan setiap div mempunyai pengendali klik sendiri (func), yang menyembunyikan anak-anaknya yang kelihatan. Apabila klik berlaku pada #b, ia secara tidak sengaja mencetuskan pengendali klik #a, mengakibatkan #b dan #c disembunyikan.

Untuk mengelakkan ini, kami boleh menggunakan kaedah stopPropagation() jQuery. Dengan menambahkan pengendali kepada kanak-kanak (dalam kes ini, #b), kita boleh menghentikan acara klik daripada menggelegak kepada induk (#a). Begini rupa pengendali klik yang diubah suai:

function handler(event) {
    event.stopPropagation();
    // now do your stuff        
}
$('#a').add('#b').click(handler);

Kod ini memastikan klik ke #b tidak akan disebarkan ke #a. Begitu juga, klik ke #c tidak akan disebarkan ke #b dan, oleh itu, bukan ke #a. Akibatnya, peristiwa klik pada elemen kanak-kanak hanya akan menjejaskan anak-anaknya sendiri, menghalang penyembunyian unsur yang tidak disengajakan dalam induk.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Penyebaran Acara dalam Elemen HTML Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!