angular - Angular4/Barn-element utlöser inte föräldra (klick) händelse

Jag har en rullgardinsfunktion som ska anropas vid ett klick på denna div

<div (click)="toggleDropdown($event)" data-id="userDropdown">
 Username <i class="mdi mdi-chevron-down"></i>
</div>

Men klickhändelsen utlöses inte när jag klickar på <i>-elementet

toggleDropdown($event) {
    const id = $event.target;
    document.querySelector('[data-drop=' + id.getAttribute('data-id') + ']').classList.toggle('active');
}

Finns det något sätt jag kan få barnets klickhändelse att utlösa förälderns?

Plnkr

Svar #1

Använd $event.currentTarget istället för $event.target

På detta sätt får du elementet som händelsehanteraren har kopplats till.

Plunker-exempel

Läs mer

  • https://developer.mozilla.org/en/docs/Web/API/Event/currentTarget

Relaterade artiklar