Aureliaイベントのバブリングの問題（？）、動作が1.0以降異なる

Question

au new（Aurelia CLI）による再現可能、以下のコード。 1.0にアップデートする前に完全に動作しました。

問題：「閉じる」ボタンを押すとclosePopup()が呼び出されますが、すぐ後にはopenPopup()も表示されます。結果は、ポップアップが閉じないということです。イベントをバブルアップしてはならないclick.triggerでも問題は解決しません。

これを解決するにはどうすればよいですか？なぜその行動が変わったのですか？

app.html

<template> 
    <div click.delegate="openPopup()" style="border: 1px solid black; width: 100px; height: 100px"> 
     <div show.bind="_expanded"> 
      Foo <button click.trigger="closePopup()">Close</button> 
     </div> 
    </div> 
</template> 

app.ts

export class App { 
    _expanded; 

    openPopup() { 
     this._expanded = true; 
     console.log("Opened"); 
    } 

    closePopup() { 
    this._expanded = false; 
    console.log("Closed"); 
    } 
} 

Answer 1

溶液（event.stopPropagation()）：

app.html

<template> 
    <div click.delegate="openPopup()" style="border: 1px solid black; width: 100px; height: 100px"> 
     <div show.bind="_expanded"> 
      Foo <button click.trigger="closePopup($event)">Close</button> 
     </div> 
    </div> 
</template> 

app.ts

// ... 

    closePopup(event) { 
    event.stopPropagation(); 
    this._expanded = false; 
    console.log("Closed"); 
    } 

// ...