Как получить целевой элемент события click в Ember?

Question

Я пытаюсь добавить модальность в Ember приложение и получил этот шаблон:

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

Проблема заключается в том, что если я нажимаю внутри тела элемента, пузырьки событий, нажмите кнопку и запускаю close действия на накладке. Если я пытаюсь предотвратить образование пузырьков, добавив действие, которое не делает ничего, чтобы элемент тела:

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

Я не могу нажать какие-либо ссылки в теле больше ...

Какой самый лучший способ решить его? Если бы я мог получить доступ к событию click в действии close, я мог бы проверить, был ли элемент нажатым, на самом деле это оверлей.

Answer 1

Я считаю, что большинство модалов, которые я видел, решили это, структурируя вещи по-разному. Оформить заказ lightbox, например. Для вас это выглядело бы как-то так.

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

Answer 2

Единственный способ я нашел, чтобы получить доступ к целевому элементу был с помощью JQuery

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

события имеет целевой элемент. Поэтому обратите внимание на im, не используя здесь ember-действия.