如何在Ember中獲取click事件的目標元素？

Question

我正在嘗試向Ember應用程序添加模式，並獲得以下模板：

<div class="modal-overlay" {{action "close"}}>
  <div class="modal-body">
    {{yield}}
  </div>
</div>

問題是，如果我在body元素內單擊，單擊事件會冒泡並觸發疊加層上的close動作。 如果我嘗試通過對body元素添加任何不做任何動作來防止冒泡：

<div class="modal-overlay" {{action "close"}}>
  <div class="modal-body" {{action "nop" bubbles=false>
    {{yield}}
  </div>
</div>

我無法再點擊體內的任何鏈接...

解決問題的最佳方法是什么？ 如果我可以在close操作中訪問click事件，則可以檢查單擊的元素是否實際上是疊加層。

Answer 1

我發現訪問目標元素的唯一方法是使用jquery

didInsertElement(){
        this.$()
            .on('click', '.gn-icon-menu', (event) => {
                event.preventDefault();

事件保存目標元素。 因此請注意，我此處未使用余燼動作。

Answer 2

我相信我見過的大多數模態都通過不同地構造事物來解決了這個問題。 例如，檢出燈箱 。 對於您來說，看起來像這樣。

<div class="modal-overlay" {{action "close"}}></div>
<div class="modal-wrap">
    <div class="modal-body>
        {{yield}}
    </div>
</div>