Selphira Selphira - 3 years ago 107
Javascript Question

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

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download