内容中的聚合物点击事件不会触发？

Question

我是 Polymer 的新手，所以不要拍我..

如何使用 core-icon-button 单击事件来触发包含在其父聚合物元素内的方法，即 my-component。

下面是我正在努力实现的示例。您可以看到有一个名为 my-component 的元素，里面有一个 core-icon-button 和一个 on-click 事件。我希望能够从 my-component 内部收听事件。我不想将 core-icon-button 放在 my-component.

中

<my-component>
    <core-icon-button
        icon="menu"
        on-click="{{theTrigger}}">
    </core-icon-button>
</my-component>


<polymer-element name="my-component">
    <template>
        <div>  
            <content id="content"></content>
        </div>
    </template>
    <script>
        Polymer({
            theTrigger: function(e){
                console.log('it works');
            }
        });
    </script>
</polymer-element>

Answer 1

简短的回答是 "you can't"。 theTrigger 方法在 diff 范围内，然后 core-icon-button 导致该方法在 my-component 元素的 shadowDom 中。您可以将按钮放在元素内，它会起作用。否则你必须创建另一个方法来定位 my-component 元素并调用方法

document.querySelector('my-component').theTrigger();

Answer 2

我通过添加 'eventDelegates'

找到了解决我的问题的方法

<my-component>
    <core-icon-button button-one icon="menu"></core-icon-button>
    <core-icon-button button-two icon="favorite"></core-icon-button>
</my-component>


<polymer-element name="my-component">
    <template>
        <div>
            <content></content>
        </div>
    </template>
    <script>
        Polymer({
            eventDelegates: {
              tap: 'tapHandler'
            },
            tapHandler: function(e) {
                if(e.target.hasAttribute('button-one')){
                    console.log( 'i am button one' );
                }else if(e.target.hasAttribute('button-two')){
                    console.log( 'i am button two' );
                }

            },
        });
    </script>
</polymer-element>

Answer 3

对于未来的访问者，这里是如何处理 "on-click" 当不是使用 <content></content> 标签的示例，这与之前的略有不同@7immy 问&解决了。（使用较新的 Polymer v1.0.0 约定）。 初学者注意：不要忘记导入paper-material、paper-icon-button、paper-dialog等，并实例化组件以完整运行这个示例。

请注意，我们使用的是聚合物的 "on-click" 而不是 "onclick".

<dom-module id="x-sample">
  <template>
    <paper-material elevation="1">
      <div class="horizontal layout">
        <span class="paper-font-body2 flex">Location Information</span>
          <paper-icon-button icon="info" data-dialog="location-info" on-click="openDialog"></paper-icon-button>
      </div>
    </paper-material>

    <paper-dialog id="location-info">
      <div>
        test
      </div>
    </paper-dialog>

  </template>
</dom-module>

<script>
  Polymer({
    is: 'x-sample',
    openDialog: function(e) {
      var button = e.target;
      while (!button.hasAttribute('data-dialog') && button !== document.body) {
        button = button.parentElement;
      }

      if (!button.hasAttribute('data-dialog')) {
        return;
      }
      var id = button.getAttribute('data-dialog');
      var dialog = document.getElementById(id);
      if (dialog) {
        dialog.open();
      }
    }
  });
</script>

内容中的聚合物点击事件不会触发？

Polymer on-click event inside content wont trigger?

javascript

dom-events

polymer