Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular4 / Child element not firing parent (click) event

I have a dropdown function which should be called with a click on this div

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

But the click event is not triggered when I click on the <i> element

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

Anyway i can make it that the child click event to trigger the parent one?

Plnkr

like image 907
ekclone Avatar asked Jul 01 '17 04:07

ekclone


People also ask

How do you prevent click event on parent element?

By a adding an onClick function for the child modal (content div) mouse click events are prevented to reach the 'closeLogin' function of the parent element.


1 Answers

Use $event.currentTarget instead of $event.target

This way you will get the element to which the event handler has been attached.

Plunker Example

Read more

  • https://developer.mozilla.org/en/docs/Web/API/Event/currentTarget
like image 60
yurzui Avatar answered Oct 18 '22 21:10

yurzui