【问题标题】:Alternative to <a href="#"> when the anchor tag only triggers a jQuery action without redirecting the user?当锚标记仅触发 jQuery 操作而不重定向用户时,替代 <a href="#">?
【发布时间】:2010-11-19 12:24:15
【问题描述】:

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

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

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

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

【问题讨论】:

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

标签: javascript jquery html anchor restful-url


【解决方案1】:

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

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

最后,您根本不能在 HTML 中静态地使用 &lt;a href="#"&gt;,而是使用 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】:

    您真的应该将&lt;button&gt; 元素用于纯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"),这样您就不会弄乱屏幕阅读器(和浏览器选项卡)。

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

      【讨论】:

        【解决方案5】:

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

        <a>Link title</a>
        

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

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

        【讨论】:

        【解决方案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()});
              

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 2014-02-06
                • 1970-01-01
                • 2011-03-16
                • 1970-01-01
                • 2020-03-29
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多