durandal - 防止锚标签导航到主页

Question

我有一个常规的锚标记，其 href 属性设置为“#”。通常，这会阻止任何导航，但在 durandal 中，它会将我导航到主视图。如何阻止它导航到该视图？我无法更改 html 和样式。它必须是那个锚标签。但我可以将点击事件绑定到它。有没有办法取消锚点点击事件中的导航？

问候

Answer 1

将点击事件绑定到它并调用 event.preventDefault()

<a href="#" id="someAnchor">Example</a>

$(function() {
   $('#someAnchor').click(function(event) { event.preventDefault(); });
});

这将阻止浏览器传播单击事件，并且不会发生任何事情。但是在单击事件中，您可以执行任何您想要的逻辑。

如果您使用淘汰赛来绑定点击事件，那么请参阅这篇 stackoverflow 帖子，了解如何从淘汰赛绑定中进行绑定。

编辑 ** Per Tyrsius 的评论是使用淘汰赛绑定绑定点击事件的更好做法。

因此，建议您这样做：

<a href="#" data-bind="click: clickHandler">ClickMe</a>

clickhandler = function (e) {
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
};

Answer 2

让所有锚链接都以前缀开头。然后在你的router.guardRoute函数中有这个：

if (_.startsWith(instruction.fragment, YOUR_PREFIX))
      return false;
}

对我来说效果很好，无需在您的应用视图中添加任何其他内容。

PS。_.startsWith是 lodash 函数。如果不使用 lodash 做 JS 字符串 indexOf 或其他