Question

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

我已经创建了一个聚合物元素列表，其中每个元素都是纸质材料，里面有铁塌陷。 iron-collapse 包含数据和一些纸张按钮。

点击父纸质材料时，我需要显示/隐藏<iron-collapse>元素。

这非常有效，但遗憾的是，点击纸张按钮后该事件也会触发，例如铁崩溃中的发送按钮。

我尝试将 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();
       }
}

Answer 1

我已经关注了“事件教程” https://www.polymer-project.org/1.0/docs/devguide/events.html

根据我的理解'tap'使整个元素听取tap事件。

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

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

1 个答案: