get original element from ng-click

229,318

Solution 1

You need $event.currentTarget instead of $event.target.

Solution 2

Not a direct answer to this question but rather to the "issue" of $event.currentTarget apparently be set to null.

This is due to the fact that console.log shows deep mutable objects at the last state of execution, not at the state when console.log was called.

You can check this for more information: Consecutive calls to console.log produce inconsistent results

Share:
229,318

Related videos on Youtube

Ozrix
Author by

Ozrix

Updated on September 07, 2020

Comments

  • Ozrix
    Ozrix almost 4 years

    I have a list of items in my view with ng-click attached to them:

    <ul id="team-filters">
        <li ng-click="foo($event, team)" ng-repeat="team in teams">
             <img src="{{team.logoSmall}}" alt="{{team.name}}" title="{{team.name}}">
        </li>
    </ul>
    

    I'm handling the click events in the foo function in my directive, passing $event as a reference to the object that's been clicked, but I'm getting a reference to the img tag, rather than the li tag. I then have to do stuff like this to get the li:

    $scope.foo = function($event, team) {
       var el = (function(){
           if ($event.target.nodeName === 'IMG') {
              return angular.element($event.target).parent(); // get li
           } else {
              return angular.element($event.target);          // is li
           }
       })();
    

    Is there a simple way to get the reference to the element that ng-click is bound to, without doing DOM operations in my directive?

  • Ozrix
    Ozrix about 10 years
    Thanks, it's working. It's weird that the currentTarget property in the $event object is set to null.
  • richardaday
    richardaday over 9 years
    This is definitely strange... if you log the $event object, $event.currentTarget looks to be null. However, if you log the $event.currentTarget reference, it shows the correct element.
  • WebWanderer
    WebWanderer over 9 years
    I usually will use var elem = $event.currentTarget || $event.srcElement. Its always been more cross-browse friendly, yet I don't know if its necessary anymore.
  • Tivie
    Tivie almost 9 years
    console.log shows deep mutable objects at the last state of execution, not at the state when console.log was called. see stackoverflow.com/questions/22059811/…