Angular ng-click $event passes child element as target

Question

For each td element in a table I have an attached ng-click. Here is the (simplified) html for each table cell:

Answer 1

In Angular 7.x

myClickHandler($event) {
    this.selectedElement = <Element>$event.target.closest('.list-item');
}

html:

<div class="list-item" (click)="myClickHandler($event)">...</div>

Answer 2

Changing:

angular.element(event.target)

to:

angular.element(event.currentTarget)

fixed my issue.

It seems to me using event.currentTarget is preferred to event.target in the majority of usage cases.

Answer 3

event.target.closest('td') won't work because event.target is a DOM element and it doesn't have method closest. You need to create a jQuery object to use this method.

Try to find closest td like this:

angular.element(event.target).closest('td')