jquery berhenti memicu anak acara orangtua

Saya memiliki div yang telah saya lampirkan onclickacara. di div ini ada tag dengan tautan. Ketika saya mengklik tautan onclickacara dari div juga dipicu. Bagaimana saya bisa menonaktifkan ini sehingga jika tautan diklik pada div onclicktidak dipecat?

naskah:

$(document).ready(function(){
    $(".header").bind("click", function(){
         $(this).children(".children").toggle();
    });
})

kode html:

<div class="header">
    <a href="link.html">some link</a>
    <ul class="children">
        <li>some list</li>
    </ul>
</div>

Melakukan hal ini:

$(document).ready(function(){
    $(".header").click(function(){
        $(this).children(".children").toggle();
    });
   $(".header a").click(function(e) {
        e.stopPropagation();
   });
});

Jika Anda ingin membaca lebih lanjut tentang .stopPropagation (), lihat di sini .

Atau, daripada memiliki pengendali event tambahan untuk mencegah pengendali lainnya, Anda bisa menggunakan argumen Object Event yang diteruskan ke pengendali event klik untuk menentukan apakah seorang anak diklik. targetakan menjadi elemen yang diklik dan currentTargetakan menjadi .header div:

$(".header").click(function(e){
     //Do nothing if .header was not directly clicked
     if(e.target !== e.currentTarget) return;

     $(this).children(".children").toggle();
});

Cara yang lebih baik dengan menggunakan on () dengan chaining seperti,

$(document).ready(function(){
    $(".header").on('click',function(){
        $(this).children(".children").toggle();
    }).on('click','a',function(e) {
        e.stopPropagation();
   });
});

Jawaban di sini mengambil pertanyaan OP terlalu harfiah. Bagaimana jawaban ini dapat diperluas menjadi skenario di mana ada elemen anak BANYAK, bukan hanya satu <a>tag? Ini satu cara.

Katakanlah Anda memiliki galeri foto dengan latar belakang pingsan dan foto-foto terpusat di browser. Saat Anda mengeklik latar belakang hitam (tetapi tidak apa pun di dalamnya), Anda ingin tutupnya ditutup.

Berikut ini beberapa HTML yang mungkin:

<div class="gallery" style="background: black">
    <div class="contents"> <!-- Let's say this div is 50% wide and centered -->
        <h1>Awesome Photos</h1>
        <img src="img1.jpg"><br>
        <img src="img2.jpg"><br>
        <img src="img3.jpg"><br>
        <img src="img4.jpg"><br>
        <img src="img5.jpg">
    </div>
</div>

Dan inilah cara kerja JavaScript:

$('.gallery').click(
    function()
    {
        $(this).hide();
    }
);

$('.gallery > .contents').click(
    function(e) {
        e.stopPropagation();
    }
);

Ini akan menghentikan acara klik dari elemen di dalam .contentsdari setiap penelitian .gallerysehingga galeri akan ditutup hanya ketika Anda mengklik area latar belakang hitam yang pudar, tetapi tidak ketika Anda mengklik di area konten. Ini dapat diterapkan pada banyak skenario yang berbeda.

Saya menemukan pertanyaan ini, mencari jawaban lain.

Saya ingin mencegah semua anak memicu orang tua.

JavaScript:

document.getElementById("parent").addEventListener("click",  function (e) {
    if (this !== event.target) return;
    // Do something
});

jQuery:

$("#parent").click(function () {
    // Do something
}).children().on("click", function (e) {
    e.stopPropagation();
});

Atau ini:

$(document).ready(function(){
    $(".header").click(function(){
        $(this).children(".children").toggle();
    });
   $(".header a").click(function(e) {
        return false;
   });
});

Solusi paling sederhana adalah menambahkan CSS ini ke anak-anak:

.your-child {
    pointer-events: none;
}

Cara yang lebih singkat untuk melakukannya:

$('.header').on('click', function () {
    $(this).children('a').on('click', function(e) {
        e.stopPropagation();
        $(this).siblings('.children').toggle();
    });
});