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
696 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!

sumber:php.cn
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