Polymer：Buttonclick触发父容器点击事件答案

【问题标题】：Polymer: Buttonclick triggers parent container click-eventPolymer：Buttonclick触发父容器点击事件
【发布时间】：2016-07-23 23:05:28
【问题描述】：

我正在尝试基于 Polymer 中的 Google Inbox 开发可折叠列表。

我创建了一个聚合物元素列表，其中每个元素都是 paper-material，里面有一个 iron-collapse。
iron-collapse 包含数据和几个 paper-button。

单击父级paper-material 时，我需要显示/隐藏<iron-collapse> 元素。

这非常有效，但不幸的是，该事件在单击 paper-button 后也会触发，例如iron-collapse里面的Send-Button。

我尝试将 event.stopPropagation() 添加到孩子的按钮处理程序中，但单击按钮时 iron-collapse 仍然折叠。

有什么想法吗？

父容器代码：

<paper-material id="papercontainer" elevation="1" class="container padded" animated style="border-radius:4px;">
   <div class="container">
        <div class="container flex-start-justified">
            <div class="flexchild">
                <h4 class="smaller-margin">Bill Gates</h4>
                <p class="smaller-margin">bill@gates.com</p>
                <p class="paper-font-caption smaller-margin">Date received: 01/01/2015</p>
            </div>
            <p>
                    <paper-button raised on-click="send">Send</paper-button>
            </p>
        </div>

<!--Code for iron-collapse (child): -->

        <div class="container flex-horizontal">
                <iron-collapse id="collapse" class="flexchild">
                    <div class="flexchild collapse-content" style="margin-top:10px;">
                         <paper-button>Edit Mail</paper-button>

                     </div>
                 </iron-collapse>
        </div>

    </div>
</paper-material>

Javascript：

Polymer({           
        is: 'zapytania-result-element2',

        toggle: function() {
            this.$.collapse.toggle();
        },

        listeners: {
            'tap': 'regularTap'
        },

        regularTap: function(e) {
            console.log('toggle iron-collapse');
            if(this.$.collapse.opened) {
                this.$.collapse.hide();
                this.$.papercontainer.elevation = 1;
            } else {
                this.$.collapse.show();
                this.$.papercontainer.elevation = 5;
            }
        },
       send: function() {
           sendMail();
       }
}

【问题讨论】：

请出示一些代码。
我提供了一些代码。一般来说， Iron-collapse 显示/隐藏，当它被点击时，以及当里面的发送按钮被点击时。如何规避？
看起来 Iron-collapse 不会监听点击事件。你确定你自己不打电话给toggle吗？ toggle() 是从哪里调用的？
我已经弄清楚了，请参阅下面的答案。谢谢你的帮助，先生。

标签： polymer

【解决方案1】：

我已按照事件教程从 https://www.polymer-project.org/1.0/docs/devguide/events.html

根据我的理解，'tap' 让整个元素监听点击事件。

在删除该处理程序并将我自己的点击事件处理程序分配给父纸张材料容器并在我孩子的按钮事件结束时调用 e.stopPropagation() 后，它可以工作。

【讨论】：