我应该将哪个 “href” 值用于 JavaScript 链接，“＃”或“javascript：void（0）”？

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

function myJsFunc() {
    alert("myJsFunc");
}

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

要么

function myJsFunc() {
    alert("myJsFunc");
}

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

答案

我使用javascript:void(0) 。

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

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

但是他们忘记在 onclick 中使用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 和相应的单击事件处理程序将锚标记注入到文档中。

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

查看Unmptrusive JavaScript和Progressive 增强 （两者都是 Wikipedia）。

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

它促进了突兀的 JavaScript 的实践 - 这已经证明难以维护并且难以扩展。有关Unobtrusive JavaScript 的更多信息。
你花时间编写令人难以置信的过于冗长的代码 - 这对你的代码库有很小的（如果有的话）好处。
现在有更好，更容易，更可维护和可扩展的方法来实现所需的结果。

不引人注目的 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>

黑盒子Backbone.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实现此a.hover 。这是完全没问题的，好像你没有 href 属性并且没有优雅的降级那么你的链接无论如何都不会起作用 - 你会担心更大的问题。
如果您希望您的操作仍然可以禁用 JavaScript，那么使用带有href属性a元素，该属性将转到某个 URL，该 URL 将手动执行操作，而不是通过 Ajax 请求或任何应该去的方式。如果您这样做，那么您希望确保在单击调用上执行event.preventDefault()以确保单击该按钮时它不会跟随该链接。此选项称为优雅降级。