使用带铁图标的轻触式纸质按钮使用不同的当前目标 [英] Different current target using on-tap on paper-button with iron-icons
问题描述
为什么使用paper-button
和iron-icons
和paper-button
和iron-icons
时,当前target
的点按是不同的?
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>
如果不使用iron-icons
(子元素),则当前的target
为paper-button
.
The current target
is paper-button
if not using iron-icons
(child element).
如果使用子元素,如何获取paper-button
作为当前的target
?
How can I get paper-button
as current target
if using a child element?
推荐答案
If you want to access the paper-button
when its contents are clicked, use the Event.currentTarget
(instead of target
):
标识事件的当前目标,因为事件遍历DOM.它始终是指事件处理程序已附加到的元素,而
event.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.
例如:
_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>
这篇关于使用带铁图标的轻触式纸质按钮使用不同的当前目标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!