Different current target using on-tap on paper-but

2019-09-07 00:37发布

站内问答 / JavaScript
1454 1 4

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?

enter image description here

codepen.io

1条回答
相关推荐>>
2楼-- · 2019-09-07 01:06

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)