Bagaimana untuk Menghalang Peristiwa Klik Ibu Bapa daripada Ditembak Apabila Sauh Kanak-Kanak Diklik?

Menghalang Peristiwa Klik Ibu Bapa Apabila Sauh Kanak-Kanak Diklik

Apabila menggabungkan elemen boleh klik dalam elemen ibu bapa dan anak-anak mereka, adalah perkara biasa untuk menghadapi senario di mana kedua-dua ibu bapa dan anak peristiwa klik dicetuskan secara serentak. Tingkah laku ini berlaku disebabkan oleh sifat menggelegak peristiwa dalam DOM.

Untuk mengelakkan peristiwa klik ibu bapa daripada dicetuskan dalam kes sedemikian, beberapa penyelesaian boleh digunakan.

Menyemak Asal Peristiwa

Menggunakan sifat e.target dalam pengendali acara klik ibu bapa membolehkan pengecaman elemen sebenar yang mencetuskan acara. Dengan membandingkan e.target dengan elemen induk, adalah mungkin untuk menentukan sama ada klik berasal daripada induk atau tempat lain di dalamnya.

Menghentikan Penyebaran Acara

Sebagai alternatif, lampirkan pengendali acara klik pada sauh anak dan memanggil e.stopPropagation() di dalamnya menghalang acara daripada menggelegak kepada induk. Dengan cara ini, peristiwa klik ibu bapa tidak akan dicetuskan apabila sauh anaknya diklik.

Contoh Kod:

$("#clickable").click(function(e) {
    if ($(e.target).is("div")) {  // Check if the event originated from the <div>
        window.location = url;
        return true;
    }
});

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

Dengan menggunakan mana-mana kaedah ini, ia menjadi mungkin untuk mengendalikan peristiwa klik secara terpilih berdasarkan elemen sasaran, memastikan acara klik ibu bapa dicetuskan hanya apabila ia adalah yang dimaksudkan sasaran.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Peristiwa Klik Ibu Bapa daripada Ditembak Apabila Sauh Kanak-Kanak Diklik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!