önle ana öğenin bir olayı tetikleme elemanları iç içe

Question

Yapısı:

.parent (has if/else to toggle on click) -> .child (has nothing) ana öğe taşan içeriği gizlemek ve tıklama üzerindeki yüksekliğini değiştirmek için tarz olduğunu

<div class="parent">Parent 
    <div class="child">Child</div> 
</div> 

. Kullanıcı tıkladığında, ana öğe alt öğeyi göstermek için genişler. Kullanıcıların ana elemanın orijinal boyutuna geri dönmeden ve alt öğeyi gizlemeden alt öğeye tıklayabilmesini istiyorum. Geçişin yalnızca ebeveynte olmasını istiyorum.

Alt öğe hala ana öğenin tıklanabilir alanı içinde yer aldığını fark ettim, ancak dışarıda bırakmanın bir yolu var mı?

Answer 1

Çözüm 1: currentTarget ile hedef karşılaştırın:

$("#parentEle").click(function(e) { 
    if(e.target == e.currentTarget) { 
     alert('parent ele clicked'); 
    } else { 
     //you could exclude this else block to have it do nothing within this listener 
     alert('child ele clicked'); 
    } 
}); 

Fiddle

e.target olayı başlatan unsur olacaktır.
e.currentTarget, şu anda bu tıklama olayında olduğu gibi parentEle olacak olan şu anda (köpüren) olacaktır.

Aynıysa, tıklamanın doğrudan üstte olduğunu biliyorsunuz.

---

Çözüm 2:

Diğer seçenek alt öğesi üzerinde bir tıklama varsa ilk etapta kadar köpüren gelen olayı önlemektir: Olay Parentele çarpmadan önce yayılmasını durdurun . Bu böyle yapılabilir:

$("#parentEle").click(function(e) { 
    alert('parent ele clicked'); 
}); 
$("#parentEle").children().click(function(e) { 
    //this prevent the event from bubbling to any event higher than the direct children 
    e.stopPropagation(); 
}); 

Fiddle

---

ikisi arasındaki temel fark ilk çözüm sadece bu dinleyici olayı görmezden ve kabardığını tutmak sağlayacak olmasıdır. Etkinliği alması gereken bu parentEle ebeveyne sahipseniz bu gerekli olabilir.

İkinci çözüm, parentEle'un doğrudan çocuklarındaki köpürme olaylarından kaynaklanan tüm tıklama olaylarını durdurur. Dolayısıyla, parentEle numaralı bir ebeveynte bir tıklama etkinliği varsa, bu etkinlikleri de asla göremezler.

Answer 2

Kullanım event.stopPropagation();:

$('#a').add('#b').click(fun1); 

function handler(event) { 
    event.stopPropagation(); 
    // now do your stuff   
}