链接仅触发点击操作，但在新标签点击时打开不同的路线答案

【问题标题】：Having a link trigger only an action on click, but opening a different route on new tab click链接仅触发点击操作，但在新标签点击时打开不同的路线
【发布时间】：2017-10-09 15:35:43
【问题描述】：

我想实现以下内容：

首先，放一个链接。
单击此链接时，应触发我当前路线中的操作（即折叠面板或类似的东西）

但是

当用户右键单击并选择“新选项卡”时，该链接应打开一个单独的路由（并且也不会触发当前路由中的任何操作，因为它无论如何都没有意义）

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

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

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

是否可以使用 EmberJS 甚至是普通的 JS 调整来实现类似的东西？

谢谢！

【问题讨论】：

标签： javascript ember.js

【解决方案1】：

将span 放入其中并使用关闭操作：

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

那么你可以调用preventDefault并返回false：

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

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

【讨论】：

您好，感谢您的回答！我试过你说的，但点击后，它仍然遵循链接。你有别的想法吗？

【解决方案2】：

好的，多亏了一位同事，我解决了这个问题。这个 sn-p 完全按照我的预期工作：

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

关键是设置“bubbles=false”，这样可以防止操作接管链接行为，但仍然允许点击触发它。

【讨论】：