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>

如果不使用target（子元素），则当前paper-button为iron-icons。

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

codepen.io

Answer 1

如果您想在点击其内容时访问paper-button，请使用Event.currentTarget（而不是target）：

在事件遍历DOM时标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。

例如：

_onTap: function(e) {
  console.log('currentTarget:', e.currentTarget);
}

＆＃13;

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    _onTap: function(e) {
      console.log('tap currentTarget:', e.currentTarget);
    }
  });
});

＆＃13;

<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>

＆＃13;

codepen

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

1 个答案: