当锚标记仅触发 jQuery 操作而不重定向用户时，替代 <a href="#">？

Posted 2023-03-31

【中文标题】当锚标记仅触发 jQuery 操作而不重定向用户时，替代 <a href="#">？

【英文标题】：Alternative to <a href="#"> when the anchor tag only triggers a jQuery action without redirecting the user?

【发布时间】：2010-11-19 12:24:15

【问题描述】：

我的页面上有许多锚标记，它们只在同一页面上触发 jQuery 操作。

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

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

除了#之外，还有什么更好的值放在锚标记的href值中？

【问题讨论】：

您是否找到了解决方案，或者我的答案是您实施的？如果是这样，如果您可以将其标记为解决方案，那就太好了。 :-)

【参考方案1】：

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

另一种选择是直接引用动态加载的内容；这样你就可以很方便地在 Ajax 调用中使用href，而不是以某种方式在 JavaScript 中硬编码要请求的内容； <a href="/path/to/dynamic/content">.

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

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

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

【参考方案2】：

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

【讨论】：

当button 没有type 属性时，它具有默认的表单行为，我真的非常惊讶，然而，这似乎是当前草案规范所说的：w3.org/TR/html5/the-button-element.html#the-button-element 我一直认为button 元素上type 的默认缺失值是button，而不是submit。谢谢。

【参考方案3】：

我使用下面的代码，效果很好。

<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

【参考方案4】：

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

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

【参考方案5】：

您是否尝试过省略 href 参数？

<a>Link title</a>

这应该可以正常工作，并且不会引起浏览器加载网页或更改页面位置。事实上，除非你有一些 JavaScript 来支持它，否则它不会做任何事情。

href 参数是可选的，如果你不使用它，为什么还要包含它呢？

【讨论】：

OP 很可能希望 标签具有蓝色的默认浏览器样式。如果没有 href 属性，它看起来就像纯文本。

锚点（实际上是任何 html 实体）的样式与其包含的参数无关。没有 href 的 看起来与

完全相同

Chrome 中没有。我没有在其他浏览器中测试过，所以我可能错了耸耸肩

使用股票 CSS 它确实看起来正确/蓝色。许多网站都有一个 reset.css 可以改变这种行为，但是没有这个标签的样式是一样的，不管它们的参数是什么

【参考方案6】：

# 很好。但是触发的回调应该是return false。

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

【参考方案7】：

我更喜欢使用：

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

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

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

通过在 onclick 事件中返回 false，您可以确保网站没有重新加载，但仍可用于在新页面中打开 url。

【讨论】：

href="javascript:" 在最新版本的 Firefox 中中断。我不确定他们什么时候改变了这一点，但我希望有一个替代方案，因为 # 通过将页面视图跳回顶部来破坏 UI。

javascript:void(0)

【参考方案8】：

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

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

在这种情况下，使用href="#" 很好，因为只要您的事件处理程序以return false; 结束，那么href 将永远不会被遵循

【参考方案9】：

return false;

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

【参考方案10】：

如果你在点击时绑定了一些动作，你可以调用 preventDefault() 来避免在页面顶部发送用户

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