Having a link trigger only an action on click, but opening a different route on new tab click

Question

I want to implement the following :

• First, put a link.
• When clicked, this link should trigger an action in my current route (i.e. collapsing a panel or something like that)

BUT

• When user right clicks and selects "new tab", this same link should open a separate route (and also not trigger any action in current route because it wouldn't make sense anyway)

So far I've tried the following:

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

I was hoping to override the default link-to behaviour by enclosing it in a clickable span but to no avail: now when I click on the link text, I am redirected to the new route and the click action itself never happens.

Is it possible to implement something like is using EmberJS or even plain JS tweaks?

Thanks!

Answer 1

put the span inside and use a closure 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 bubbeling up to the link-to.

Answer 2

Okay guys, I solved this thanks to a colleague. This snippet is working exactly as I intended:

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

The key was to set "bubbles=false", which prevents the action from taking over the link behaviour but still allows a click to trigger it.