jquery stop child tetikleyici üst olay

Bir onclicketkinlik eklediğim bir div var . bu div'de bağlantı içeren bir etiket var. Bağlantıyı tıkladığımda div'den gelen onclickolay da tetiklenir. Div üzerindeki bağlantı tıklandığında onclicktetiklenmeyecek şekilde bunu nasıl devre dışı bırakabilirim ?

senaryo:

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

HTML Kodu:

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

Bunu yap:

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

.StopPropagation () hakkında daha fazla bilgi edinmek istiyorsanız , buraya bakın .

Veya, başka bir işleyiciyi önlemek için fazladan bir olay işleyicisine sahip olmak yerine, bir alt öğenin tıklanıp tıklanmadığını belirlemek için tıklama olay işleyicinize iletilen Olay Nesnesi bağımsız değişkenini kullanabilirsiniz . targettıklanan öğe currentTargetolacak ve .header div olacaktır:

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

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

Gibi zincirleme ile () kullanarak daha iyi bir yol ,

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

Buradaki cevaplar OP'nin sorusunu tam anlamıyla aldı. Bu cevaplar, yalnızca tek bir <a>etiketin değil, birçok alt öğenin olduğu bir senaryoya nasıl genişletilebilir ? İşte bir yol.

Diyelim ki arka planı karartılmış bir fotoğraf galeriniz ve tarayıcıda ortalanmış fotoğraflar var. Siyah arka planı tıklattığınızda (ancak içinde hiçbir şey olmadığında) kaplamanın kapanmasını istersiniz.

İşte bazı olası HTML:

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

İşte JavaScript'in çalışması:

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

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

Bu, .contentsher araştırmanın içindeki öğelerden gelen tıklama olaylarını durduracaktır, .galleryböylece galeri yalnızca soluk siyah arka plan alanını tıkladığınızda kapanır, ancak içerik alanını tıkladığınızda kapanmaz. Bu, birçok farklı senaryoya uygulanabilir.

Bu soruyu tökezledim, başka bir cevap arıyorum.

Tüm çocukların ebeveyni tetiklemesini önlemek istedim .

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();
});

Veya bu:

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

En basit çözüm bu CSS'yi çocuklara eklemektir:

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

Bunu yapmanın daha kısa bir yolu:

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