"onclick"和"href=javascript:function name"有什么区别？

Question

这两者有什么区别吗？

1 : <a href="javascript:MyFunction()">Link1</a>

并且

2 : <a href="#" onclick="MyFunction()">Link2</a>

你会以任何方式影响页面性能吗？

- Shyju

---

可能是https://dev59.com/w3NA5IYBdhLWcg3wKaYx的重复问题。 - kennytm

Answer 1

如果您的元素实际上并不打算将用户链接到某个地方，就不要将其作为锚点元素。如果您只是想使用 <a> 标签来获得下划线或光标变化，请不要这样做。请改用在 <span>（或其他元素）上使用CSS。

span.link {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

保持你的 HTML 语义化，只有在你想要链接用户到其他地方时才使用锚元素。

- Peter Bailey

Answer 2

没有性能差异。

第一个很糟糕，因为对于没有启用JS的用户来说，它将完全失败。

第二个仍然很糟糕，但如果href指向一个URL，对于没有启用JS的用户来说会更好。

- Amy B

Answer 3

使用onclick方法可以将“this”作为参数传递，因此您可以引用单击来源的标签/对象。这在协议方法中是不可能的：

<a href="#" onclick="alert(this.innerHTML)">yo yo yo</a>

将弹出一个警告弹窗，显示"yo yo yo"，而

<a href="javascript:alert(this.innerHTML)">yo yo yo</a>

将会输出 'undefined'。

- Marc B

Answer 4

href="javascript: doSomething" 的意思是，如果用户没有启用js，则没有备用的url可供使用。

因此，通常认为设置 href="something.html" 和 onclick="return doSomething()" 更好，因为如果js被禁用，您可以导航到新页面，但是如果js已启用，则可以返回false以防止导航到链接并在不刷新页面的情况下在同一页面中显示内容。

更好的方法是，在页面加载时添加js处理程序而不是内联添加onclick。这是不显眼的方式。

- Ruan Mendes

Answer 5

这两种方法的功能有所不同，第一种不会尝试处理链接，而第二种则会。

然而，我同意Coronatus的观点 - 这两种方法都不是理想的。我建议研究无侵入式JavaScript（也许使用jQuery），因为您可以动态地向元素添加点击事件。

- Mayo

Answer 6

如果您的网站需要JavaScript才能正常运行，则在href中使用JavaScript是最好的选择，因为它可以在状态栏中显示链接并保持代码紧凑。在href中还可以通过键盘导航而无需使用鼠标。如果您的网站需要在没有JavaScript的情况下运行，则必须使用onclick，以便href中可以有一个链接。将操作添加到单独的JavaScript文件中会导致代码和数据松散绑定。

- rtdrury