Polymer：Buttonclickが親コンテナのクリックイベントをトリガーする

Question

Google Inboxをベースにした折りたたみリストをPolymerで作成しようとしています。

Iは、各要素が内部鉄崩壊と紙材料あるポリマー要素のリストを作成しました。
鉄崩壊には、データと紙の2つのボタンが含まれています。 sです。

親紙素材をクリックすると、<iron-collapse>要素を表示/非表示にする必要があります。

これは本当にうまくいきますが、残念なことにそのイベントはのペーパーボタンをクリックした後にも発生します。 送付ボタン内部の鉄崩壊。

は私が子供のボタンハンドラに する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を：私は私の理解 'タップ' パー https://www.polymer-project.org/1.0/docs/devguide/events.html

からイベントのチュートリアルに従っている

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

は、全体の要素がために聞いてますタップイベント。

ハンドラを削除し、自分のクリック時のイベントハンドラを親紙材質のコンテナに割り当て、子のボタンイベントの最後にe.stopPropagation（）を呼び出すと、それは機能します。