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!

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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.

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

Sign up