使用带铁图标的纸按钮点击不同的当前目标

Question

为什么当前 target 使用 paper-button 和 iron-icons 与 paper-button 不使用 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。

如果使用子元素，如何让 paper-button 成为当前 target？

codepen.io

Answer 1

如果要在单击其内容时访问 paper-button，请使用 Event.currentTarget（而不是 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>

codepen

使用带铁图标的纸按钮点击不同的当前目标

Different current target using on-tap on paper-button with iron-icons

javascript

polymer

polymer-1.0