CODEWITHSUNDEEP
javascriptviewember.jsclick
JJJ
JJJ

Reputation: 2899

Stop click propagation from Ember action?

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}}

Upvotes: 17

Views: 17108

Answers (3)

Andrey Stukalin
Andrey Stukalin

Reputation: 5929

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>

Upvotes: 1

undeletable
undeletable

Reputation: 1580

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

Upvotes: 39

undeletable
undeletable

Reputation: 1580

Try to modify the action:

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

This worked for me in a similar situation

Upvotes: 6

Related Questions