Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Menghalang Klik Sauh Kanak-kanak daripada Mencetuskan Peristiwa Klik Ibu Bapa?

Bagaimana untuk Menghalang Klik Sauh Kanak-kanak daripada Mencetuskan Peristiwa Klik Ibu Bapa?

Linda Hamilton
Lepaskan: 2024-12-14 18:39:09
asal
775 orang telah melayarinya

How to Prevent Child Anchor Clicks from Triggering Parent Click Events?

Menghalang Peristiwa Klik Anchor Kanak-kanak daripada Mencetuskan Acara Klik Ibu Bapa

Seperti yang ditunjukkan oleh kod anda, apabila elemen penambat anak diklik dalam div induk dengan acara onclick, kedua-dua peristiwa itu berlaku. Untuk menyelesaikan isu ini dan menghalang acara klik induk daripada dilaksanakan, anda mempunyai dua pilihan:

Pilihan 1: Semak Asal Acara

Dengan memeriksa objek eventargs yang diluluskan oleh jQuery , anda boleh menentukan elemen yang memulakan klik:

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

Jika elemen penghantar bukan div itu sendiri, pengendali onclick div tidak akan dicetuskan.

Pilihan 2: Hentikan Acara Bubbling

Sebagai alternatif, anda boleh menghalang acara klik daripada menggelegak kepada induk dengan menggunakan kaedah stopPropagation() pada sauh anak:

$("#clickable a").click(function(e) {
    // Custom anchor handler
    e.stopPropagation();
});
Salin selepas log masuk

Kaedah ini menghalang acara daripada disebarkan ke div induk, memastikan bahawa hanya acara klik sauh dihidupkan.

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan