Rails link_to：点击但保持原位，不要跳到页面顶部

Question

我的rails应用中有一个link_to。它起到工具提示的作用。当用户将鼠标悬停在链接上时：它会显示一些帮助文本。

如果用户不小心点击了工具提示：我不希望跳转到页面顶部的默认行为。我知道javascript我可以preventDefault，但是有一种简单的方法来获得同样的行为吗？

我在考虑remote: true，但它仍然会跳到页面顶部。

代码：

<%= link_to "#", title: 'my helper text', remote: true do %>
  <i class="fa fa-question-circle"></i>
<% end %>

Answer 1

使用空锚将导致滚动到文档开始，如您所经历的那样。但是，指定不存在的锚点将导致滚动位置无变化。例如：

<a href="#doesnotexist">Stay Here</a>

但这仍然会改变文档URL和浏览器历史记录，这是一种更糟糕的用户体验。

对于不应更改页面的链接，例如通过JS处理的链接，您应该绝对使用渐进增强，并使用最合适的方法阻止JS中的浏览器操作（例如return false或{{1 }}）。

如果您的工具提示实际上不应该链接到任何地方，也许最好将它们更改为另一个内联元素，例如e.preventDefault。

Answer 2

我最终使用了<a>标记以及onclick="return false;"正如logistic regression中所建议的那样。

如果您有更好的解决方案，请分享：

<a onclick="return false;" data-toggle="tooltip" data-html="true" title="<%= my_helper_text%>”><i class="fa fa-question-circle"></i></a>

Answer 3

在这种情况下，我通常成功使用nil。

<%= link_to nil, title: 'my helper text' %>
  <i class="fa fa-question-circle"></i>
<% end %>

经过一些研究后，我发现有些人声称应该使用javascript:;，但我使用nil时没有遇到任何问题。

Answer 4

除非您需要实际链接，否则请勿使用锚元素。使用正确的HTML元素。在这种情况下，您应该使用span元素。

你应该可以这样做：

<span data-toggle="tooltip" data-html="true" title="<%= my_helper_text%>”><span class="fa fa-question-circle"></span></span>

或者甚至是这样：

<span data-toggle="tooltip" data-html="true" title="my helper text" class="fa fa-question-circle"></span>