Bagaimanakah Saya Boleh Menghalang Peristiwa Klik Induk daripada Ditembak Apabila Elemen Kanak-kanak Diklik?

Memahami Peristiwa Bubbling dalam Acara Klik Bersarang

Apabila mengklik pada elemen dalam elemen induk yang kedua-duanya mempunyai pendengar acara klik, kedua-dua acara mungkin dicetuskan. Tingkah laku ini, yang dikenali sebagai acara menggelegak, boleh membawa kepada hasil yang tidak diingini apabila anda tidak mahu acara elemen induk menyala serentak.

Dalam senario khusus anda, anda menghadapi isu ini dengan div boleh klik yang mengandungi sauh tag. Untuk menyelesaikannya, mari kita terokai dua pendekatan:

1. Pengenalpastian Sasaran Acara Asal

Untuk menghalang acara klik div induk daripada menyala apabila sauh diklik, semak asal acara itu sendiri. jQuery menyediakan sifat e.target dalam argumen acara yang diserahkan kepada pengendali acara.

$("#clickable").click(function(e) {
    var senderElement = e.target;
    if($(senderElement).is("div")) {
        window.location = url;
        return true;
    }
});

Dalam pendekatan ini, anda mengesahkan sama ada acara itu berasal daripada elemen div berdasarkan pemilihnya. Jika ia bukan div, peristiwa penukaran window.location tidak dicetuskan.

2. Penghentian Penyebaran Acara

Sebagai alternatif, anda boleh menghalang menggelegak acara klik untuk sauh menggunakan kaedah e.stopPropagation() dalam pengendali acara klik mereka:

$("#clickable a").click(function(e) {
    e.stopPropagation();
    // Do something specific to the anchor
});

Dengan pendekatan ini, acara klik anchor melaksanakan logiknya sendiri tanpa menyebarkan acara kepada elemen induknya, dengan berkesan menghalang acara klik div daripada menembak.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Peristiwa Klik Induk daripada Ditembak Apabila Elemen Kanak-kanak Diklik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!