替代 当锚标记只触发 jQuery 操作而不重定向用户时？

Question

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

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

我不想在我的应用程序中为每个操作都提供静态 URL。但是，我也不喜欢每次用户单击其中一个时都将用户发送到页面顶部> 标签。

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

Answer 1

您能否引用页面上的一个片段来作为未执行的 JavaScript 操作的逻辑后备？如果是这样，那么引用 并在页面上拥有一个可以工作的 id="account" 就很有意义了作为后备。

另一种选择是直接引用动态加载的内容；这样您就可以非常方便地在 Ajax 调用中使用 href，而不用以某种方式对 JavaScript 中请求的内容进行硬编码； 。

最后，您根本不能在 HTML 中静态地使用 ，而是使用 jQuery 动态创建它，因为它只由 jQuery 使用。如果占位符仅由 JavaScript 使用或用于 JavaScript，则无需使用 JavaScript 占位符污染标记。

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

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

Answer 2

您确实应该使用 元素来执行纯 JS 操作。它们有一个默认操作（如果在表单内部，或者使用 将它们与表单关联起来的 form 属性），但没有附加表单，它们纯粹用于您将 JS 事件处理程序绑定到的用户触发操作。

Answer 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

Answer 4

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

但如果您想继续使用 ...，只需为它们附加一个调用 event.preventDefault() 的处理程序即可; 或返回false。

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

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

<a>Link title</a>

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

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

Answer 7

# 没问题。但触发的回调应该返回 false。

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

Answer 8

如果锚点对于没有 JavaScript 的人来说毫无用处，那么他们根本不应该看到它。

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

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

Answer 9

return false;

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

Answer 10

如果您在点击时绑定一些操作，则可以调用 PreventDefault() 以避免将用户发送到页面顶部

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