Zapobieganie zagnieżdżone elementy wyzwalaniu zdarzenie do elementu nadrzędnego

Question

Struktura:

.parent (has if/else to toggle on click) -> .child (has nothing)

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

element nadrzędny jest zaprojektowany tak, aby ukryć rozlanego treści i przełączyć swój szczyt w kliknięcia. Gdy użytkownik kliknie, element nadrzędny zostanie rozwinięty, aby wyświetlić element potomny. Chcę, aby użytkownicy mogli kliknąć element potomny bez elementu nadrzędnego, aby przywrócić pierwotny rozmiar i ukryć element podrzędny. Chcę, aby przełączanie się odbywało się tylko na rodzicu.

Rozumiem, że element potomny nadal znajduje się w obszarze klikalnym elementu nadrzędnego, ale czy istnieje sposób na jego wykluczenie?

Answer 1

Rozwiązanie 1: Porównaj bramkę currentTarget:

$("#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 będzie elementem, który rozpoczął imprezę.
e.currentTarget będzie tam, gdzie jest aktualnie (bulgotanie), które będzie parentEle w tym wydarzeniu kliknięcia, ponieważ właśnie tego słucha.

Jeśli są takie same, wiesz, że kliknięcie pochodzi bezpośrednio od rodzica.

---

Rozwiązanie 2: Zatrzymać rozprzestrzenianie przed wydarzeniem uderza parentEle:

Inną opcją jest zapobieganie zdarzenie od propagacji w pierwszej kolejności, czy jest kliknięcie na elemencie dziecka . Że można zrobić tak:

$("#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

---

Główną różnicą między nimi jest, że pierwsze rozwiązanie będzie po prostu zignorować wydarzenie w tym słuchacza i pozwalają na utrzymanie się pęcherzyków. Może to być konieczne, jeśli masz rodzica tego parentEle, który musi uzyskać wydarzenie.

Drugie rozwiązanie powstrzymuje wszelkie zdarzenia kliknięcia przed propagowaniem ostatnich użytkowników pod adresami parentEle. Jeśli więc zdarzyło się jedno kliknięcie na rodzica parentEle, oni też nigdy nie zobaczą tych wydarzeń.

Answer 2

Zastosowanie event.stopPropagation();:

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

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