Angular ng-click $event passes child element as target

ng-click angular 8
angular 6 click event
angular input events
angular element find
angular events
angular events list
angular.element by id
angularjs ng-click function with parameters

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

<td ng-click="cellClicked($event)">
    <span ng-if="!cellEdit">{{event.eventName}}</span>
    <input type="text" ng-if="cellEdit" ng-model="event.eventName">
</td>

And my (simplified) ng-click function:

scope.cellClicked = function (event) {
  rowScope.cellEdit = true
  angular.element(event.target).find('input').focus()
}

Its my goal to:

  1. User clicks a table cell
  2. Cell changes to "edit mode"
  3. Give focus to the input element located inside the td.

Right now this is working as long as the user clicks inside the td element but not on the span element:

console.log(angular.element(event.target)) #--> [td...] (as desired)

However if the user clicks on the span element within the td:

console.log(angular.element(event.target)) #--> [span...]

In this use case assigning focus does not work. I was hoping to access the parent element of the span doing something like:

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

or

angular.element(event.target.parentNode)

But it appears when an element gets passed through via $event and accessed there is no parent context.

How can I either:

  • Prevent clicking the span element firing the td's ng-click
  • On click of span element pass through it's html parent

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.

angular.element, If jQuery is available, angular.element is an alias for the jQuery function. To use jQuery , simply ensure it is loaded before the angular.js file. use on() ) - Does not support namespaces, selectors or eventData; children() - Does not a function as first argument; triggerHandler() - Passes a dummy event object to handlers� Accessing DOM elements in Angular Directives — event.target vs ElementRef you can either use event.target or reference the element via that even a click on child nodes like h1 sets the

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')

ngClick, The ngClick directive allows you to specify custom behavior when an element is Expression to evaluate upon click. (Event object is available as $event )� Event bubbling is an approach to listening for events that’s better for performance and gives you a bit more flexibility. Instead of adding event listeners to specific elements, you listen to all events on a parent element (often the document or window). Events within that element “bubble up,” and you can check to see if the element that triggered the event (the event.target) matches the

In Angular 7.x

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

html:

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

User input, The (click) to the left of the equals sign identifies the button's click event as the target of DOM event object in the $event variable which this code passes as a parameter to In this case, target refers to the <input> element and event.target. value You can reference newHero from any sibling or child of the <input> element. In this case, target refers to the <input> element and event.target.value returns the current contents of that element. After each call, the onKey() method appends the contents of the input box value to the list in the component's values property, followed by a separator character (|).

Why we need to pass “$event” in ng-click? - angularjs - html, What I've found in angular docs $event Directives like ngClick and ngFocus expose a $event object within the scope of that expression. The object is an instance� Detecting clicks on a component is easy in Angular 2: Just use the (click) event binding, pass a function from the component’s instance and you are done. However, if you need to detect clicks outside of your component, things are getting tricky. You will usually need this for custom implementations of drop-down lists, context menus, … Continue reading Angular 2: A Simple Click Outside

Handling Events :: Eloquent JavaScript, For most event types, handlers registered on nodes with children will also receive a single click handler on the outer node and have it use the target property to When an event handler is called, it is passed an event object with additional� The parent component was able to set the value of the child DOM Element. Using ViewChild with Child Components. ViewChild makes it possible to access a child component and call methods or access instance variables that are available to the child. Let’s say we have a ChildComponent. Ideally, you will use @angular/cli to generate your component:

Checking event target selectors with event bubbling in vanilla , Events within that element “bubble up,” and you can check to see if the element that Listen to all clicks on the document document. addEventListener('click', function (event) { // If the event target doesn't The matches() method checks to see if an element matches any CSS selector pattern you pass in. And if you remember, in my previous post on Angular Event Binding, I’ve stated that it’s never a good idea to access DOM elements and their methods or properties directly, let alone

Comments
  • unfortunately this does not work. Trying this gives: [prevObject: jQuery.fn.init[1], context: div.ng-scope.ng-binding, jquery: "1.11.0", constructor: function, selector: ""…]
  • How do you know it doesn't work, I mean what you posted is a jQuery object. Does it selects parent TD?
  • I tried it, and it didn't work. You're right, it is a jQuery object, but not the one I want. Something like [td ....] is what I was looking for. Thanks for your answer though!