缺点:

<a id="myLink" href="javascript:MyFunction();">link text</a>

好:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

好:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

更好的是:

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

更好的2:

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

为什么好吗?因为返回false会阻止浏览器跟踪该链接

最好的:

使用jQuery或其他类似的框架附加onclick处理程序的元素的ID。

$('#myLink').click(function(){ MyFunction(); return false; });

就我个人而言，我觉得把javascript调用放在HREF标签中很烦人。我通常不太注意某些东西是不是javascript链接，而且经常想在一个新窗口中打开东西。当我尝试这样做与这些类型的链接之一，我得到一个空白页面上什么都没有和javascript在我的位置栏。但是，通过使用onlick可以避免这一点。

我不敢相信13年后，所有这些答案在语义上都是错误的!一个锚元素<a>:

.．.使用它的href属性，创建一个超链接到网页，文件，电子邮件地址，同一页面中的位置，或任何其他URL可以地址。 每个链接中的内容应该指明链接的目的地。如果存在href属性，在聚焦于元素时按enter键将激活它。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

因此，在javascript中使用href=是一种糟糕的做法和糟糕的web语义。你应该在按钮元素上使用onclick=事件处理程序属性，如下所示:

HTML元素是一个交互式元素，由用户通过鼠标、键盘、手指、语音命令或其他辅助技术激活。一旦激活，它就会执行可编程操作，例如提交表单或打开对话框。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

事件处理程序onclick=:

所有事件处理程序属性接受一个字符串。该字符串将用于合成一个JavaScript函数，如function name(/args/) {body}，其中name是属性的名称，body是属性的值。

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#event_handler_attributes

因为你不是导航到一个URL或链接目的地，而是触发一个Javascript函数，这样做的正确方法是使用onclick。如果你需要一个按钮上的锚标记的样式，只需使用CSS。

底线是:你能做并不意味着你就应该做。

上面的答案是一个非常糟糕的做法，永远不要链接到空哈希，因为它可能会在后面产生问题。

最好的方法是将事件处理程序绑定到元素上，就像许多人所说的那样，但是<a href="javascript:doStuff();“>do stuff</a>在每个现代浏览器中都能完美地工作，我在渲染模板时广泛使用它，以避免为每个实例重新绑定。在某些情况下，这种方法提供了更好的性能。YMMV

另一个有趣的消息是....

Onclick和href在直接调用javascript时有不同的行为。

onclick将正确地传递这个上下文，而href不会，换句话说，<a href="javascript:doStuff(这个)">没有上下文</ >将不工作，而<a onclick="javascript:doStuff(此)">no context</a>将。

是的，我省略了href。虽然这并不符合规范，但它可以在所有浏览器中工作，尽管理想情况下，它应该包括一个href="javascript:void(0);"作为良好的衡量标准

就javascript而言，一个区别是onclick处理程序中的this关键字将引用其onclick属性的DOM元素(在本例中为<a>元素)，而href属性中的this将引用窗口对象。

在表示方面，如果链接中缺少href属性(例如<a onclick="[…]">)，那么默认情况下，浏览器将显示文本游标(而不是通常需要的指针游标)，因为它将<a>视为锚，而不是链接。

在行为方面，当通过href导航指定操作时，浏览器通常支持使用快捷方式或上下文菜单在单独的窗口中打开该href。当只通过onclick指定操作时，这是不可能的。

但是，如果您想知道从DOM对象的单击中获得动态操作的最佳方法是什么，那么使用javascript将事件与文档内容分开是最佳方法。你可以通过多种方式做到这一点。一个常见的方法是使用javascript库，如jQuery来绑定一个事件:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>

投票最多的答案在今天已经过时了

我建议完全相反，循序渐进地看原因:

好:

<a id="myLink" href="javascript:MyFunction();">link text</a>

这取决于，可能是好的，因为爬虫跟踪href目标，如果有任何有意义的内容产生MyFunction()(动态链接)，它比在click事件中更有可能被跟踪，后者可能有多个或没有侦听器。

bad:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

#意味着没有意义的链接，爬虫通常只对前x个链接感兴趣，所以它可以阻止它们在页面后面跟踪一些有意义的链接。

更糟糕的是:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

与前面加return false一样，可以防止跟随链接。如果一些其他脚本想要添加另一个侦听器并更新目标(比如通过代理重定向)，他们不能不修改onclick(好吧，这只是一个小挫折，因为这样的用例相当理论化)。

坏的:

使用jQuery或其他类似的框架附加onclick处理程序的元素的ID。

$('#myLink').click(function(){ MyFunction(); return false; });

jQuery在2020+已经过时，不应该在新项目中使用。

href中的事件

href属性处理程序没有得到事件对象，因此处理程序不会隐式地看到哪个链接是源。你可以在onclick处理程序中添加它，它会在href之后触发:

<a href="javascript:my_function(event2)" onclick="event2=event">
  JS based link
</a>

<script>
function my_function(e) {
  console.log(e.target); // the source of the click
  if(something) location.href = ...; // dynamic link
}
</script>