我应该将哪个“href”值用于JavaScript链接，“#”或“javascript:void(0）”

我使用javascript:void(0) .

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

function doSomething() {
    //Some code
    return false;
}

但是后来他们忘记在点击中使用return doSomething()，而只是使用doSomething().

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

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

onclick="someFunc.call(this)"

或

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

使用javascript:void(0)可以避免上述所有头痛，而且我还没有找到任何缺点的例子。

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

使用 href="#" ，确保onclick末尾始终包含return false;，任何被调用的函数都不会引发错误，并且如果您将函数动态附加到 onclick 属性，请确保除了不抛出错误外，它还返回false。

或

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

第二个显然更容易沟通。

都不是。

如果可以有一个有意义的实际 URL，请将其用作 HREF。 如果有人中键单击您的链接以打开新选项卡，或者他们禁用了 JavaScript，则不会触发 onclick。

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

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

查看 Unobusive JavaScript 和 Progressive enhancement（均为维基百科）。

做<a href="#" onclick="myJsFunc();">Link</a>或<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>或其他任何包含onclick属性的事情 - 五年前是可以的，尽管现在它可能是一种不好的做法。原因如下：

1. 它促进了突兀的JavaScript的做法 - 事实证明，这种JavaScript难以维护且难以扩展。更多关于这一点的信息，请参阅 Unobusive JavaScript。

2. 你花时间编写令人难以置信的过于冗长的代码 - 这对你的代码库几乎没有（如果有的话）好处。

3. 现在有更好、更简单、更易于维护和可扩展的方式来实现预期结果。

不显眼的 JavaScript 方式

只是根本没有href属性！任何好的CSS重置都会处理缺少的默认光标样式，因此这不是问题。然后使用优雅且不显眼的最佳实践附加您的 JavaScript 功能 - 这些最佳实践更易于维护，因为您的 JavaScript 逻辑保留在 JavaScript 中，而不是您的标记中 - 当您开始开发需要将您的逻辑拆分为黑盒组件和模板的大型 JavaScript 应用程序时，这一点至关重要。在大规模 JavaScript 应用程序架构中对此进行了更多介绍

简单代码示例

// 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');
});

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

黑盒骨干.js示例

有关可扩展的黑盒 Backbone.js 组件示例 - 请参阅此处的工作 jsfiddle 示例。请注意我们如何利用不显眼的JavaScript实践，并且在少量代码中有一个组件，该组件可以在页面上多次重复，而不会在不同组件实例之间产生副作用或冲突。了不起！

笔记

• 省略a元素上的 href 属性将导致无法使用tab键导航访问该元素。如果希望通过 tab 键访问这些元素，可以设置 tabindex 属性，或改用button元素。您可以轻松地设置按钮元素的样式，使其看起来像Tracker1答案中提到的普通链接。

• 省略a元素上的 href 属性将导致 Internet Explorer 6 和 Internet  Explorer  7 不采用a:hover样式，这就是为什么我们添加了一个简单的 JavaScript 填充程序来通过 a.hover 来实现这一点。这完全没问题，就像您没有 href 属性并且没有优雅的降级一样，那么您的链接无论如何都不会起作用 - 您将有更大的问题需要担心。

• 如果您希望您的操作仍然在禁用 JavaScript 的情况下工作，那么使用带有 href 属性的 a 元素，该元素转到某个 URL，该 URL 将手动执行操作，而不是通过 Ajax 请求或其他方式。如果您正在执行此操作，那么您需要确保对单击调用进行event.preventDefault()，以确保单击按钮时它不会跟随链接。此选项称为正常降级。

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

javascript:;的行为也像javascript:void(0);

老实说，我建议两者都不要。 我会为这种行为使用程式化的<button></button>。

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}

<p>A button that looks like a <button type="button" class="link">link</button>.</p>

这样，您就可以分配点击次数。 我还建议通过脚本绑定，而不是在元素标签上使用 onclick 属性。 唯一的问题是旧IE中的伪3d文本效果，无法禁用。

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

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

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

第一个，理想情况下有一个真正的链接，以防用户禁用JavaScript。只需确保返回 false 以防止在 JavaScript 执行时触发点击事件。

<a href="#" onclick="myJsFunc(); return false;">Link</a>

如果你使用 Angular2，这种方式有效：

<a [routerLink]="" (click)="passTheSalt()">Click me</a> .

https://stackoverflow.com/a/45465728/2803344 见这里

如果你问我，也不是;

如果你的"链接"的唯一目的是运行一些JavaScript代码，那么它就不符合链接的条件;而是一段带有JavaScript函数的文本。我建议使用附加onclick handler和一些基本 CSS 的 <span> 标签来模拟链接。链接是为导航而创建的，如果你的 JavaScript 代码不是用来导航的，它不应该是一个<a>标签。

例：

function callFunction() { console.log("function called"); }

.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}

<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>

理想情况下，你会这样做：

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

或者，更好的是，您将在HTML中拥有默认的操作链接，并且在DOM渲染后通过JavaScript不显眼地将onclick事件添加到元素中，从而确保如果JavaScript不存在/未被利用，您不会有无用的事件处理程序使您的代码百合一谈，并可能混淆（或至少分散）您的实际内容。

仅使用#会做出一些有趣的动作，因此如果您想节省JavaScript bla, bla,的打字工作量，我建议您使用 #self .

我使用以下

<a href="javascript:;" onclick="myJsFunc();">Link</a>

相反

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>

我建议改用 <button> 元素，尤其是在控件应该在数据中产生更改的情况下。（类似于帖子。

如果您不显眼地注入元素，这是一种渐进式增强，那就更好了。（请参阅此评论。

我同意其他地方的建议，即您应该在href属性中使用常规URL，然后在onclick中调用一些JavaScript函数。缺陷是，它们在调用后自动添加return false。

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

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

JavaScript

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

.HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

请注意，我否定了doSomething()函数的结果。如果它有效，它将返回true，因此它将被否定（false），并且path/to/some/URL不会被调用。如果函数将返回false（例如，浏览器不支持函数中使用的某些内容或其他任何错误），则将其否定为true并调用path/to/some/URL。

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

.HTML：

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript：

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

您应该始终努力实现优雅的降级（如果用户没有启用 JavaScript...以及当它与规格时。和预算）。 此外，直接在HTML中使用JavaScript属性和协议被认为是不好的形式。

除非您使用 JavaScript 写出链接（以便您知道它在浏览器中已启用），否则理想情况下，您应该为在禁用 JavaScript 的情况下浏览的用户提供适当的链接，然后在 onclick 事件处理程序中阻止链接的默认操作。这样，那些启用了JavaScript的人将运行该功能，而那些禁用JavaScript的人将跳转到适当的页面（或同一页面中的位置），而不仅仅是单击链接而没有任何反应。

哈希（#）肯定更好，因为在JavaScript中它是一个伪方案：

1. 污染历史
2. 实例化引擎的新副本
3. 在全局范围内运行，不考虑事件系统。

当然，带有防止默认操作的 onclick 处理程序的"#"要好得多。此外，一个唯一目的是运行JavaScript的链接并不是真正的"链接"，除非你在出现问题时将用户发送到页面上的某个明智的锚点（只是#将发送到顶部）。您可以简单地模拟与样式表链接的外观和感觉，而完全忘记href。

此外，关于 cowgod 的建议，特别是这个： ...href="javascript_required.html" onclick="... 这是个好方法，但它没有区分"JavaScript 禁用"和"onclick 失败"场景。

我通常会去

<a href="javascript:;" onclick="yourFunction()">Link description</a>

它比 javascript：void（0） 短，并且做同样的事情。

我选择使用javascript:void(0)，因为使用它可能会阻止右键单击打开内容菜单。但是javascript:;更短，做同样的事情。

我会使用：

<a href="#" onclick="myJsFunc();return false;">Link</a>

原因：

1. 这使得href简单，搜索引擎需要它。如果使用任何其他内容（例如字符串），则可能会导致404 not found错误。
2. 当鼠标悬停在链接上时，它不会显示它是一个脚本。
3. 通过使用 return false; ，页面不会跳转到顶部或中断back按钮。

不要将链接仅用于运行 JavaScript。

href="#" 将页面滚动到顶部;使用 void（0） 会在浏览器中产生导航问题。

请改用链接以外的元素：

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

并使用 CSS 设置样式：

.funcActuator { 
  cursor: default;
}
.funcActuator:hover { 
  color: #900;
}

因此，当您使用 <a /> 标记执行一些 JavaScript 操作时，如果您也放置href="#"，则可以在事件末尾添加 return false（在内联事件绑定的情况下），如下所示：

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

或者你可以用 JavaScript 更改 href 属性，比如：

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

或

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

但从语义上讲，上述所有实现这一目标的方法都是错误的（尽管效果很好）。如果没有创建任何元素来导航页面，并且有一些与之关联的 JavaScript 内容，那么它不应该是 <a> 标记。

您可以简单地使用<button />来执行操作或任何其他元素，例如 b、span 或任何适合您的需要，因为您可以在所有元素上添加事件。

因此，使用<a href="#">有一个好处。默认情况下，当您执行 a href="#" 时，您会在该元素上获得光标指针。为此，我认为您可以像cursor:pointer;一样使用 CSS 也可以解决此问题。

最后，如果你从 JavaScript 代码本身绑定事件，如果你使用<a>标签，你可以做event.preventDefault()来实现这一点，但如果你没有为此使用 <a> 标签，你会得到一个优势，你不需要这样做。

所以，如果你看到，最好不要为这种东西使用标签。

最好使用 jQuery，

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

并省略href="#"和href="javascript:void(0)".

锚标记将类似于

<a onclick="hello()">Hello</a>

足够简单！

通常，您应该始终有一个回退链接，以确保禁用JavaScript的客户端仍然具有某些功能。这个概念被称为不显眼的JavaScript。

例。。。假设您有以下搜索链接：

<a href="search.php" id="searchLink">Search</a>

您始终可以执行以下操作：

var link = document.getElementById('searchLink');
link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

这样，禁用 JavaScript 的用户就会被定向到search.php而使用 JavaScript 的观看者则会看到您的增强功能。

如果你碰巧正在使用AngularJS，你可以使用以下内容：

<a href="">Do some fancy JavaScript</a>

这不会做任何事情。

另外

• 它不会像 （#） 那样将您带到页面顶部
  • 因此，您不需要使用 JavaScript 显式返回 false
• 它简短简洁

根据您要完成的操作，您可以忘记onclick，而只使用href：

<a href="javascript:myJsFunc()">Link Text</a>

它绕过了返回 false 的需要。我不喜欢#选项，因为如前所述，它会将用户带到页面顶部。如果你有其他地方可以发送用户，如果他们没有启用JavaScript（这在我工作的地方很少见，但这是一个非常好的主意），那么Steve提出的方法效果很好。

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

不希望任何人去任何地方，如果你不想调用JavaScript函数，你可以使用javascript:void(0)。如果您有一个希望发生鼠标悬停事件的图像，但它效果很好，但用户没有可单击的任何内容。

你提出了一个错误的二分法。这不是唯一的两个选择。

我同意 D4V360 先生的建议，即使您使用锚标签，这里也没有真正的锚点。您所拥有的只是文档的一个特殊部分，其行为应该略有不同。<span>标签更合适。

我用开发者工具在谷歌浏览器中尝试了这两种方法，id="#"花了 0.32 秒。而javascript:void(0)方法仅用了0.18秒。所以在谷歌浏览器中，javascript:void(0)更好、更快。

我个人将它们组合使用。例如：

.HTML

<a href="#">Link</a>

用一点点的jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

或

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

但我使用它只是为了防止当用户单击空锚点时页面跳到顶部。我很少直接在HTML中使用onClick和其他on事件。

我的建议是使用带有class属性<span>元素，而不是一个锚点。例如：

<span class="link">Link</span>

然后将函数分配给.link，脚本包装在正文中，紧挨着 </body> 标记之前或外部 JavaScript 文档中。

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

*注意：对于动态创建的元素，请使用：

$('.link').on('click', function() {
    // do something
});

对于使用动态创建的元素创建的动态创建的元素，请使用：

$(document).on('click','.link', function() {
    // do something
});

然后，您可以将 span 元素的样式设置为看起来像带有一点 CSS 的锚点：

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

这是上面提到的jsFiddle示例。

在现代网站上，如果元素只执行JavaScript功能（而不是真正的链接），则应避免使用href。

为什么？此元素的存在告诉浏览器这是与目标的链接。这样，浏览器将显示"在新选项卡/窗口中打开"功能（当您使用 shift + 单击时也会触发）。这样做将导致打开同一页面而没有触发所需的功能（导致用户感到沮丧）。

关于IE：从IE8开始，如果设置了文档类型，则元素样式（包括悬停）有效。其他版本的IE不再真正担心了。

唯一的缺点：删除 HREF 将删除选项卡索引。若要解决此问题，可以使用样式为链接的按钮或使用 JS 添加 tabindex 属性。

当我有几个假链接时，我更喜欢给他们一个"无链接"类。

然后在jQuery中，我添加以下代码：

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

对于 HTML，链接很简单

<a href="/" class="no-link">Faux-Link</a>

我不喜欢使用哈希标签，除非它们用于锚点，并且我只在有两个以上的假链接时才执行上述操作，否则我会使用 javascript：void（0）。

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

通常，我喜欢完全避免使用链接，而只是将某些内容包装在一个跨度中，并将其用作激活某些JavaScript代码的一种方式，例如弹出窗口或内容显示。

很高兴您的网站可以被禁用 JavaScript 的用户访问，在这种情况下，href 指向执行与正在执行的 JavaScript 相同操作的页面。否则，我将"#"与" return false;"一起使用，以防止其他人提到的默认操作（滚动到页面顶部）。

谷歌搜索"javascript:void(0)"提供了很多关于这个话题的信息。其中一些，比如这个提到了不使用 void（0） 的原因。