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

Menghalang Peristiwa Induk Tercetus daripada Klik Sauh Kanak-Kanak

Dalam pengaturcaraan web, selalunya perlu mempunyai elemen boleh klik yang bersarang dalam elemen boleh klik yang lain. Walau bagaimanapun, apabila elemen utama (teg 'a') diklik dalam elemen induk boleh klik, kedua-dua peristiwa klik boleh dicetuskan, menyebabkan gelagat yang tidak diingini.

Definisi Masalah:

Matlamatnya adalah untuk menghalang peristiwa onclick elemen induk daripada tercetus apabila anak anchor diklik. Ini memastikan bahawa hanya tindakan yang dimaksudkan penambat berlaku.

Penyelesaian 1: Menyemak Asal Acara

jQuery menyediakan objek 'entargs' yang mengandungi maklumat tentang asal acara. Dengan menyemak eventargs dalam pengendali onclick elemen induk, kami boleh menentukan sama ada klik berasal daripada sauh:

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

Dalam kod ini, kami menyemak sama ada sasaran acara ialah elemen 'div'. Jika ya, kami mencetuskan tindakan ibu bapa (mengubah hala ke URL tertentu).

Penyelesaian 2: Menghentikan Peristiwa menggelegak

Peristiwa menggelegak merujuk kepada penyebaran peristiwa melalui pokok DOM. Dengan menambahkan pengendali klik pada sauh dan memanggil 'e.stopPropagation()' di dalamnya, kita boleh menghalang acara daripada menggelegak ke elemen induk:

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

Pendekatan ini serta-merta menghentikan acara daripada meneruskan perjalanan menaiknya dalam DOM, memastikan bahawa hanya tindakan penambat dilaksanakan.

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