Bagaimana untuk Menghalang Pengendali Acara Ibu Bapa daripada Membakar apabila Mengklik Elemen Anak dalam Div HTML Hierarki?

Menghalang Pelaksanaan Pengendali Acara Induk dalam Div HTML Hierarki

Apabila bekerja dengan elemen HTML hierarki, isu biasa ialah potensi elemen kanak-kanak untuk mencetuskan pengendali acara dalam elemen induk mereka. Dalam senario berikut, pepohon div dibuat, setiap satu dengan acara onclick yang menjadikan anak-anaknya tidak kelihatan:

<div>

Masalah timbul apabila acara klik pada div kanak-kanak "b" mencetuskan pengendali acara bagi div induk "a," menyebabkan "b" dan anaknya "c" menjadi tidak kelihatan. Ini adalah tingkah laku yang tidak diingini, kerana ia mengganggu kefungsian elemen kanak-kanak yang dimaksudkan.

Penyelesaian:

Untuk mengelakkan kesan melata ini, kami boleh menggunakan jQuery's stopPropagation() kaedah untuk melumpuhkan pelaksanaan pengendali acara induk apabila elemen anak adalah diklik:

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

Dengan menambahkan pengendali acara ini pada kedua-dua div induk "a" dan div anak "b", kami memastikan bahawa klik pada anak "b" tidak lagi akan menyebarkan DOM dan mencetuskan induk pengendali acara. Akibatnya, "b" dan "c" akan kekal kelihatan selepas mengklik pada "b."

Teknik ini menyediakan kawalan tepat ke atas penyebaran peristiwa dalam struktur hierarki, membolehkan pembangun menyesuaikan gelagat elemen individu dalam antara muka yang kompleks.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Pengendali Acara Ibu Bapa daripada Membakar apabila Mengklik Elemen Anak dalam Div HTML Hierarki?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!