以下是构建链接的两种方法，其唯一目的是运行 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>

网友回答：

也不。

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

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

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

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

网友回答：

我使用 .javascript:void(0)

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

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

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

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

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

onclick="someFunc.call(this)"

或

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

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

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

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

或

用href="javascript:void(0)"

第二个显然更容易沟通。

网友回答：

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

1. 它促进了突兀的JavaScript的做法 – 事实证明，这种JavaScript难以维护且难以扩展。更多关于这一点的信息，请参阅 Unobusive JavaScript。
2. 你把时间花在编写令人难以置信的过于冗长的代码上——这对你的代码库几乎没有（如果有的话）好处。
3. 现在有更好、更简单、更易于维护和可扩展的方式来实现预期结果。

不显眼的 JavaScript 方式

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

简单代码示例

// 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实践，并且在少量代码中有一个组件，该组件可以在页面上多次重复，而不会在不同组件实例之间产生副作用或冲突。了不起！

笔记

• 省略元素上的属性将导致无法使用键导航访问元素。如果您希望通过键访问这些元素，则可以设置属性，或改用元素。您可以轻松地设置按钮元素的样式，使其看起来像Tracker1答案中提到的普通链接。hrefatabtabtabindexbutton
• 省略元素上的属性将导致 Internet Explorer 6 和 Internet Explorer 7 不采用样式，这就是为什么我们添加了一个简单的 JavaScript 填充码来完成此操作的原因。这完全没问题，就像您没有 href 属性并且没有优雅的降级一样，那么您的链接无论如何都不会起作用——而且您将有更大的问题需要担心。hrefaa:hovera.hover
• 如果您希望您的操作仍然在禁用 JavaScript 的情况下工作，那么使用带有属性的元素，该属性将转到某个 URL，该 URL 将手动执行操作，而不是通过 Ajax 请求或任何应该采用的方式。如果您正在这样做，那么您需要确保在单击时进行单击调用，以确保单击按钮时它不会跟随链接。此选项称为正常降级。ahrefevent.preventDefault()