我正在尝试开发基于Polymer Inbox in Polymer的可折叠列表 .
我已经创建了一个聚合物元素列表，其中每个元素都是一种纸质材料，里面有铁塌陷 .
铁塌陷包含数据和几个纸按钮 .
单击父纸质材料时，我需要显示/隐藏 <iron-collapse> 元素 .
这非常有效，但遗憾的是，点击纸质按钮后该事件也会触发，例如 Send-Button 里面的铁崩溃 .
我尝试将event.stopPropagation（）添加到子项的按钮处理程序中，但是当单击按钮时，铁崩溃仍然会崩溃 .
有任何想法吗？
父容器的代码：
<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();
}
}
1 回答
我从https://www.polymer-project.org/1.0/docs/devguide/events.html开始关注事件教程
根据我的理解'tap'使整个元素听取tap事件 .
删除该处理程序并将我自己的on-click事件处理程序分配给父纸质材料容器并在我孩子的按钮事件结束时调用e.stopPropagation（）它可以工作 .