链接仅触发单击操作，但在新选项卡上打开不同的路径单击

Question

我想实现以下内容：

• 首先，放一个链接。
• 点击后，此链接应触发当前路线中的操作（即折叠面板或类似内容）

BUT

• 当用户右键单击并选择＆＃34;新标签＆＃34;时，此相同的链接应该打开一个单独的路径（并且也不会触发当前路线中的任何操作，因为它无论如何都没有意义）

到目前为止，我已尝试过以下方法：

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

我希望通过将其封装在可点击的范围内来覆盖默认的链接行为但是无济于事：现在当我点击链接文本时，我被重定向到新路由并且点击操作本身永远不会发生。

是否可以实现类似于使用EmberJS甚至是简单的JS调整的东西？

谢谢！

Answer 1

将span置于内部并使用关闭操作：

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

然后你可以调用preventDefault并返回false：

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

这可以防止事件冒泡到link-to。

Answer 2

好的，伙计们，我解决了这个问题。这段代码完全符合我的预期：

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

关键是要设置“bubbles = false”，这会阻止操作接管链接行为，但仍允许点击触发它。