Question

我的页面上有很多锚标记只能在同一页面上触发jQuery操作。

不要将用户重定向到其他位置，这是锚标记的正常预期行为。

我不想在我的应用中为每个操作都提供安静的网址。但是，我也不喜欢每次点击其中一个操作时将用户发送到页面顶部这些<a href="#">代码。

除了href之外，置于锚标记的#值之内有什么更好的价值？

Answer 1

您可以在页面上引用一个片段，该片段可以作为未执行的JavaScript操作的逻辑后备吗？如果是这样，引用<a href="#account">并在页面上有一个id="account"可以作为后备使用是很有意义的。

另一种选择是直接引用动态加载的内容;通过这种方式，您可以非常方便地在Ajax调用中使用href，而不是以某种方式对JavaScript中的请求进行硬编码; <a href="/path/to/dynamic/content">。

最后，你根本不能在HTML中静态地使用<a href="#">，而是使用jQuery动态创建它，因为它只用于jQuery。如果占位符仅由JavaScript使用，则无需使用JavaScript的占位符污染标记。

关于“将用户发送到页面顶部”;你应该只是return false来自你作为click()处理程序连接的函数;

$('a').click(function() {
    // Do your stuff.
    // The below line prevents the 'href' on the anchor to be followed.
    return false;
});

Answer 2

您应该将<button>元素用于仅限JS的操作。它们具有默认操作（如果在表单内）但在表单之外，它们纯粹是用于将您的JS事件处理程序绑定到的用户触发操作。

Answer 3

如果您的链接不是链接，也许它们不应该是链接？ :-)您可能会考虑一个不具有默认行为（在表单之外）的不同UI元素，如button（您可以在很大程度上设置按钮样式）。或者你可以使用span或类似的，但如果你确实设置了适当的辅助功能信息（例如ARIA role="link"），那么你就不会搞砸屏幕阅读器（和浏览器标签）

但是，如果您想继续使用<a href="#">...</a>，只需将处理程序附加到调用event.preventDefault();或返回false的处理程序。

Answer 4

#没问题。但是，触发的回调应该是return false。

   // assigning a click callback to all anchors
   $('a').click(function(evt){
       //... do stuff
       return false; // avoid jump to '#'
   })

Answer 5

我更喜欢使用：

<a href="javascript:">foo</a>

除非它实际上是一个加载部分模板的ajax调用，在这种情况下我使用这样的东西：

<a href="/link/to/page" onClick="ajax_request_to_partial(); return false;">foo</a>

通过在onclick事件中返回false，您可以确保该站点未重新加载，但仍可用于在新页面中打开该URL。

Answer 6

如果锚对没有javascript的人没用，那么根本就不应该看到它。

最好的选择是在页面加载时使用jQuery生成这些链接 - 这样，只有那些看到它们的人才会使用它们。

在这种情况下，href="#"很好，因为只要您的事件处理程序以return false;结束，就永远不会跟随href

Answer 7

您是否尝试省略href参数？

<a>Link title</a>

这应该工作得很好，不会激怒浏览器加载网页或更改页面位置。事实上，除非你有一些JavaScript支持它，否则它不会做任何事情。

href参数是可选的，如果您不使用它，为什么要包括它？

Answer 8

我使用下面的代码，工作正常。

<div class="panel-heading">Definition
          <div class="pull-right">
              <i class="fa fa-wrench"></i> 
                 <a id="step3Ad" href="javascript:void(0);">Advanced</a>
          </div>
    </div

Answer 9

return false;

使用它来阻止浏览器将它们发送到页面顶部？

Answer 10

如果您在点击时绑定某些操作，则可以调用preventDefault（）以避免在页面顶部发送用户

$("a.clickable").live('click',function(){$(this).doSome(); $(this).preventDefault()});

<a href="#"> when the anchor tag only triggers a jQuery action without redirecting the user?</a>的替代方案

10 个答案: