CODEWITHSUNDEEP
javascripteventspolymer
Meisenmann
Meisenmann

Reputation: 129

Polymer Event Target

if i add a tap-event-listener to an instance of a polymer component with some elements in its local dom, the target (and source) of the event can be a element of the local dom.

What is the best way to get always a reference to the host element and not any of its children in the local dom?

Example: component with local dom

<dom-module id="x-foo">
  <template> 
    <p>Foo</p>
    <img id="image" src$="[[src]]" width$="[[width]]" height$="[[height]]">
  </template>
  <script src="x-foo.js"></script>
</dom-module>

Use component and add a listener

<x-foo on-tap="_onTap">
...
_onTap: function(e) {
   // here i need a reference to the element
   // that listens to the tap (host / x-foo)
   // but if i tap on the img, the target is a
   // reference to the img element
}

Thank you

Greets, Meisenmann

Upvotes: 0

Views: 374

Answers (2)

Deepak Jha
Deepak Jha

Reputation: 1609

As suggested by Mishu in his comments about e.currentTarget, however there is another important point to note is that if you wish to know how many places your events has traversed from, check composedPath() this method keeps track of all the places your event has traversed through !

Upvotes: 1

mishu
mishu

Reputation: 5397

You can try to use

e.currentTarget

instead of

e.target

as described here

You can see in the description that it "Identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to event.target which identifies the element on which the event occurred."

Upvotes: 2

Related Questions