onclick和href ="javascript:函数名称有什么区别？

Question

两者之间有什么区别吗？

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

和

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

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

Answer 1

如果您的元素实际上不应该在某个位置链接用户,请不要将其作为锚元素.如果你使用<a>标签只是为了获得下划线/光标变化 - 不要.<span>改为在(或其他元素)上使用CSS .

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

保留HTML语义并仅在您想要将用户链接到某处时才使用锚元素.

Answer 2

没有性能差异.

第一个是废话,因为对于没有启用JS的用户,它将完全失败.

第二个仍然是垃圾,但如果href指向没有启用JS的用户的URL 会更好.

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>

会吐出“未定义”。