关于html:javascript链接应该使用哪个”href”值 “#” or “javascript:void(0)”?


Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?

以下是构建链接的两种方法，它们的唯一目的是运行JavaScript代码。在功能、页面加载速度、验证目的等方面，哪一个更好？

1
2
3
function myJsFunc() {
    alert("myJsFunc");
}
1
Run JavaScript Code

或

1
2
3
function myJsFunc() {
    alert("myJsFunc");
}
1
 Run JavaScript Code

相关讨论

我用的是javascript:void(0)。

三个原因。鼓励在开发团队中使用#，不可避免地会导致一些人使用这样的函数的返回值：

1
2
3
4
function doSomething() {
    //Some code
    return false;
}

但后来他们忘记了在onclick中使用return doSomething()，只使用doSomething()。

避免#的第二个原因是，如果被调用的函数抛出错误，最终的return false;将不会执行。因此，开发人员还必须记住在被调用的函数中适当地处理任何错误。

第三个原因是存在动态分配onclick事件属性的情况。我更喜欢能够调用一个函数或动态地分配它，而不必为一种或另一种附加方法专门编写函数代码。因此，在HTML标记中，我的onclick或任何东西看起来如下：

1
onclick="someFunc.call(this)"

或

1
onclick="someFunc.apply(this, arguments)"

使用EDOCX1[1]可以避免上述所有的头痛，而且我还没有发现任何负面的例子。

因此，如果你是一个独立的开发人员，那么你可以明确地做出自己的选择，但是如果你作为一个团队工作，你必须声明：

使用href="#"，确保onclick在结尾处始终包含return false;，任何被调用的函数都不会引发错误，如果您动态地将函数附加到onclick属性，则确保在不引发错误的同时返回false。

或

使用href="javascript:void(0)"。

第二种显然更容易沟通。

相关讨论

两者都不。

如果您可以有一个真正的有意义的URL，请将其用作href。如果有人点击你的链接打开一个新的标签或者他们禁用了javascript，onclick就不会触发。

如果这是不可能的，那么您至少应该使用JavaScript和适当的单击事件处理程序将定位标记注入到文档中。

我意识到这并不总是可能的，但在我看来，在开发任何公共网站时都应该努力做到这一点。

查看不引人注目的javascript和渐进式增强(都是维基百科)。

相关讨论

Link或任何其他Link做或是onclick属性中包含了一个五年后，这是好的东西，但现在它可以坏的做法。这是为什么：

  • 它在实践promotes obtrusive JavaScript，这已变成很难、很难保持表。这对JavaScript unobtrusive更多的在线。

  • 你花费你的时间写作，这令人难以置信的详细代码欧弗利(北达科他州)有非常小(如有)codebase受益你。

  • 有了更好的和更容易维护，和更多的可伸缩的方式，所需的accomplishing)的结果。

    • unobtrusive JavaScript的方式

    Just Don’t有一个href属性在所有！任何好的CSS重置会照顾缺失默认的光标样式，所以是非的问题。然后你使用JavaScript功能连接unobtrusive优美和最佳实践，更多的是维护你的stays JavaScript JavaScript中的逻辑，而不是在你的标记，这是必要的，当你开始发展大型的JavaScript应用程序，需要你的逻辑上是分裂成组件和温度blackboxed鲈。更多的在线，这在大型的javascript应用程序体系结构

    简单的代码例子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // Cancel click event
    $('.cancel-action').click(function(){
        alert('Cancel action occurs!');
    });

    // Hover shim for Internet Explorer 6 and Internet Explorer 7.
    $(document.body).on('hover','a',function(){
        $(this).toggleClass('hover');
    });
    1
    2
    a { cursor: pointer; color: blue; }
    a:hover,a.hover { text-decoration: underline; }
    1
    2
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    Cancel this action

    在blackboxed backbone.js例子

    是可扩展的，blackboxed backbone.js组件的例子，这个例子jsfiddle在国有企业工作。注意如何使用JavaScript，我们的做法unobtrusive微小的量，和在组件的代码有一个重复的网页，可以在不影响或多次侧之间的冲突的不同的组件的实例。惊人的！

    笔记

    • omitting href的属性将导致在a元到元的使用是不可访问tab键导航。如果你想用这些元素是通过tab访问键，你可以设置tabindex属性，或使用button元素相反。你可以很容易地元素风格的按钮链接到看起来像正常的tracker1回答中提到的。

    • omitting hrefa元的属性将导致在Internet Explorer  ； ；Internet Explorer 6、 ； ；(7)不需要在a:hover造型，这是为什么我们有一个简单的JavaScript添加到这个途径。a.hoveraccomplish垫片。这是一perfectly好吧，如果你不有一个href属性中的链接，然后你优美的退化和工作无论如何不会和你有一个担心的大问题。

    • 如果你想你的工作与行动仍然禁用JavaScript，然后用一元与ahref属性，去一些网址，而不是表演的行动手动或通过一个Ajax请求也应走之路。如果你这样做，你要确保你对你的一event.preventDefault()点击呼叫按钮，以确保当一clicked不跟它的链接。这一个被称为期权的优美的退化。

    相关讨论

    '#'会把用户带回到页面的顶部，所以我通常使用void(0)。

    javascript:;的行为也与javascript:void(0);相似。

    相关讨论

    我真诚地建议两者都不要。我会用一个风格化的来表现这种行为。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    button.link {
      display: inline-block;
      position: relative;
      background-color: transparent;
      cursor: pointer;
      border: 0;
      padding: 0;
      color: #00f;
      text-decoration: underline;
      font: inherit;
    }
    1
    2
    3
    <p>
    A button that looks like a <button type="button" class="link">link</button>.
    </p>

    这样就可以分配onclick。我还建议通过脚本绑定，不要在元素标记上使用onclick属性。唯一的解决办法是在旧的IES中不能禁用psuedo 3D文本效果。

    如果必须使用a元素，出于前面提到的原因，请使用javascript:void(0);。

    • 如果您的onclick事件失败，将始终拦截。
    • 不会发生错误的加载调用，也不会根据哈希更改触发其他事件
    • 如果单击失败(onclick引发)，哈希标记可能会导致意外行为，除非它是适当的失败行为，并且您希望更改导航历史记录，否则请避免它。

    注意：您可以将0替换为一个字符串，例如javascript:void('Delete record 123')，它可以作为一个额外的指示器，显示单击实际将执行的操作。

    相关讨论

    第一个，最好有一个真正的链接，以防用户禁用了javascript。只要确保返回false，以防止在JavaScript执行时触发Click事件。

    1
    Link

    如果使用Angular2，则此方法有效：

    Click me。

    请参阅此处https://stackoverflow.com/a/45465728/2803344

    相关讨论

    如果你问我也不知道；

    如果您的"链接"的唯一目的是运行一些javascript代码，那么它不属于链接；而是一段带有与之耦合的javascript函数的文本。我建议使用一个标记，附加一个onclick handler和一些基本的css来导入链接。链接是用于导航的，如果您的javascript代码不是用于导航的，那么它不应该是一个标记。

    例子：

    1
    function callFunction() { console.log("function called"); }
    1
    2
    3
    4
    5
    .jsAction {
        cursor: pointer;
        color: #00f;
        text-decoration: underline;
    }
    1
    2
    3
    <p>
    I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.
    </p>

    相关讨论

    理想情况下，您可以这样做：

    1
    Link text

    或者，更好的是，在HTML中有默认的操作链接，并且在DOM呈现后通过javascript将onclick事件无障碍地添加到元素中，从而确保如果不存在/使用javascript，则不会有无用的事件处理程序清除代码，并可能混淆(或至少分散)实际的内容。

    只使用#会产生一些有趣的动作，因此如果您想节省JavaScript bla, bla,的打字工作量，我建议使用#self。

    相关讨论

    我用下面的

    1
    Link

    相反

    1
    Link
    相关讨论

    我同意其他建议，即应该在href属性中使用常规URL，然后在onclick中调用一些javascript函数。缺点是，他们会在通话后自动添加return false。

    这种方法的问题是，如果功能不起作用或者出现任何问题，链接将变得不可点击。onclick事件将始终返回false，因此不会调用正常的URL。

    有非常简单的解决方案。如果函数工作正常，则让函数返回true。然后使用返回值确定是否应取消单击：

    JavaScript

    1
    2
    3
    4
    function doSomething() {
        alert( 'you clicked on the link' );
        return true;
    }

    HTML

    1
    link text

    注意，我否定了doSomething()函数的结果。如果成功，它将返回true，因此它将被否定(false)，而不会调用path/to/some/URL。如果函数将返回false(例如，浏览器不支持在函数中使用的某个内容，或者有任何其他错误)，则会对true进行否定，并调用path/to/some/URL。

    #比javascript:anything好，但以下更好：

    HTML：

    1
    For great justice

    JavaScript：

    1
    2
    3
    $(function() {
        $(".some-selector").click(myJsFunc);
    });

    您应该一直努力实现优雅的降级(如果用户没有启用javascript……以及当它具有规范时)。和预算)。另外，直接在HTML中使用javascript属性和协议也被认为是不好的形式。

    相关讨论

    除非您使用javascript编写链接(这样您就知道它在浏览器中启用了)，否则理想情况下，您应该为禁用了javascript的浏览者提供适当的链接，然后在onclick事件处理程序中阻止链接的默认操作。这样，那些启用了javascript的用户将运行函数，而那些禁用了javascript的用户将跳转到一个适当的页面(或同一页面中的位置)，而不仅仅是单击链接，什么都不会发生。

    我建议使用