如何在Ember中获取click事件的目标元素？

Question

I'm trying to add a modal to Ember app and got this template:

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

The problem is that if I click inside body element, the click event bubbles and triggers close action on the overlay. If I try to prevent bubbling by adding an action that doesn't do anything to the body element:

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

I can't click any links in the body anymore...

What's the best way to solve it? If I could access click event in the close action, I could check if the element clicked was actually the overlay.

Answer 1

The only way i found to access the target element was using jquery

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

event holds the target element. So notice im not using ember actions here.

Answer 2

I believe most modals I've seen have solved this by structuring things differently. Checkout lightbox for example. It would look kinda like this for you.

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