The presence of a link starts the action only by clicking, but opens another route in a new tab.

Question

I want to implement the following:

• Put the link first.
• When clicked, this link should trigger an action on my current route (i.e. minimize the panel or something like that)

BUT

• When the user right-clicks and selects the “new tab”, the same link should open a separate route (and also not start any actions on the current route, because this does not make sense).

So far I have tried the following:

<span {{action 'collapsePanel'}}> {{#link-to 'otherRoute'}} Some text {{/link-to}} </span> 

I was hoping to override the default link behavior by including it in the interactive range, but to no avail: now when I click on the link text, I am redirected to a new route and the click action never happens.

Is it possible to implement something like using EmberJS or even simple JS settings?

Thanks!

Answer 1

Ok guys, I decided this thanks to a colleague. This snippet works exactly as I expected:

 {{#link-to "otherRoute"}} <span {{action "collapsePanel" bubbles=false}}> Some text </span> {{/link-to}} 

The key was to set "bubbles = false", which does not allow the action to intercept the behavior of the link, but still allows the click to launch it.

Answer 2

type span in and use the close action:

 {{#link-to 'otherRoute'}} <span onclick={{action 'collapsePanel'}}> Some text </span> {{/link-to}} 

then you can call preventDefault and return false:

 collapsePanel(event) { event.preventDefault(); return false; } 

this should prevent the event from flowing to link-to .