Identify HTML elements when event triggers

Question

I have my app with tons of buttons/inputs/etc. with different events. I want to clearly identify each one of them which some event triggers on.

For example, when I have a piece of my app:

<div class="someClass">
  <div>
    <someOtherElement>
      <div></div>
      <div><button ng-click="someClickEvent($event)"></button></div>
    </someOtherElement>
  </div>
</div>

I want to identify somehow, which button I have just clicked:

function someClickEvent(e) {
   // some identification code here
}

[edit]

Maybe I wrote this wrong... I want some identification like XPath or something that will point which button were triggered (for error logging purposes).

So when I click my button and some error occurs, I want to identify the button and log some information about it (e.g. div[0].someClass>div[0]>someOtherElement[0]>div[1]>button[0]).

Do you want to identify the button with the id attribute?

Sachila Ranawaka
– Sachila Ranawaka

2017-10-10 06:25:10 +00:00
Commented Oct 10, 2017 at 6:25 — Sachila Ranawaka
– Sachila Ranawaka, Commented Oct 10, 2017 at 6:25

Ido Glikman · Accepted Answer · 2017-10-14 12:42:18Z

1

You can get identify the button and log it by this:

$scope.clickFunc = function(event){
   $scope.clickedElement = event.target.outerHTML;
};

DEMO: http://jsfiddle.net/rjdzuxaL/1/

answered Oct 14, 2017 at 12:42

Ido Glikman

1911 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jitender · Accepted Answer · 2017-10-10 06:30:10Z

0

Use ng-click instead on onclick

<button  ng-click="myFunction($event)">test</button>

Working demo

answered Oct 10, 2017 at 6:30

jitender

10.4k1 gold badge22 silver badges49 bronze badges

Comments

K K · Accepted Answer · 2017-10-10 06:34:57Z

0

Change HTML to:

<button  ng-click="myFunction($event)">test</button> //onclick works on javascript. For Angularjs, use ng-click.

JS:

$scope.someClickEvent = function(e) {
  // some identification code here
  var element = e.target; // this will give you the reference to the element.
}

You should avoid handling DOM in the controller. Use directives for them.

answered Oct 10, 2017 at 6:34

K K

18.2k4 gold badges33 silver badges39 bronze badges

1 Comment

alecdwm Over a year ago

Note: e.target will be a reference to the node clicked. e.currentTarget will be a reference to the node you attached your event handler to. Sometimes e.target !== e.currentTarget, for example when clicking on a child node of e.currentTarget. source

Collectives™ on Stack Overflow

Identify HTML elements when event triggers

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related