Stop click propagation from Ember action?

Question

I have this code that when icon-edit span is clicked, it fires an action that opens a modal, however, at the same time, the click propagates to the view below it (personView). I want the action to execute and stop the propagation.

The only solution I can think of is to make the icon-edit its own view and stop the click propagation by returning false in method click. Is there any other way of doing this without making another view?

HBS:

{{#view Blocks.PersonView}}
  <span class="inline pull-right icon-edit" {{action 'modalOpen' 'modifyPersonPopup' 'modifyPerson' this}}></span>
  <p class="inline pull-left person-name">{{firstNameDelayed}}</p>
{{/view}}

Biron

Is there a click event hook already called in PersonView and are you handling a click inside the modalOpen action? – Thenna

There's a click event hook inside person view – Biron

One option is to look at the event.target in PersonView and if the target is .icon-edit, use the Em.ViewtargetActionSupport mixin to call the action modalOpen. But that's still a bit hacky. You may need to use event.preventDefault(); and event.stopPropagation(); together too. – Thenna

Answer 1

Also you can add bubbles=false parameter to action tag. See the API documentation for how to configure event propagation.

Malawi

This is a much better answer that I had originally I selected. Just switched this to be the accepted answer! – Biron

Awesome ! This exactly what I was looking for. BTW the link related to ember doc doesn't mention anything on bubbles. – Conference

Most likely this is no more valid for Ember 2.x (you are automatically redirected to 2.x guide section by the link above) since this item is still present for Ember 1.x docs. – Malawi

Actually this worked for me with Ember 2.5. I just added bubbles=false after my last parameter in the action definition in my template. – Iy

Answer 2

Try to modify the action:

modalOpen: function {
    //code of your action
    return false;    
}

This worked for me in a similar situation

Malawi

Tnx, bubble=false did not help but this yes. – Reneareneau

Hopefully you tried bubbles=false which works exactly as return false; works in the action. – Tryma

Bubbles=false doesn't work for me – Stowaway

Answer 3

The octane way of achieving this would be using the stop-propagation helper from the ember-event-helpers addon.

<span class="inline pull-right icon-edit" {{on "click" (stop-propagation (queue this.modalOpen this.modifyPersonPopup this.modifyPerson))}}></span>

Amathist