Why current target
on-tap is different using paper-button
with iron-icons
and paper-button
without iron-icons
?
<dom-module id="button-tap">
<template>
<paper-button on-tap="_getData">without icon</paper-button>
<paper-button on-tap="_getData"><iron-icon="icons:thumb-up"></iron-icon> with icon</paper-button>
</template>
</dom>
The current target
is paper-button
if not using iron-icons
(child element).
How can I get paper-button
as current target
if using a child element?
codepen.io
If you want to access the paper-button
when its contents are clicked, use the Event.currentTarget
(instead of target
):
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.
For example:
_onTap: function(e) {
console.log('currentTarget:', e.currentTarget);
}
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
_onTap: function(e) {
console.log('tap currentTarget:', e.currentTarget);
}
});
});
<head>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-icons/communication-icons.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<div>paper-button:</div>
<paper-button on-tap="_onTap">
<iron-icon icon="communication:email"></iron-icon>
Email
</paper-button>
<div>
<div>paper-icon-button:</div>
<paper-icon-button icon="communication:email" on-tap="_onTap"></paper-icon-button>
</div>
</template>
</dom-module>
</body>
codepen