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

Posted 2023-03-05

【中文标题】onclick 和 href="javascript:function name 有啥区别？

【英文标题】：What is the Difference between onclick and href="javascript:function name?onclick 和 href="javascript:function name 有什么区别？

【发布时间】：2011-02-04 11:34:01

【问题描述】：

有什么区别

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

和

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

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

【问题讨论】：

***.com/questions/1070760/…的可能重复

【参考方案1】：

如果您的元素实际上不应该将用户链接到某个地方，不要将其设为锚元素。如果您使用 <a> 标签只是为了更改下划线/光标 - 不要。改为在 <span>（或其他元素）上使用 CSS。

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

保持 html 语义，仅当您想将用户链接到某个地方时才使用锚元素。

【参考方案2】：

没有性能差异。

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

第二个仍然是废话，但如果href 指向未启用 JS 的用户的 URL 会更好。

【参考方案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>

会吐出“未定义”。

【参考方案4】：

一个 href="javascript: doSomething" 意味着如果用户没有启用 js，你没有一个 url 可以回退。

因此，通常认为设置 href="something.html" 和 onclick="return doSomething()" 更好，因为如果禁用了 js，可以导航到新页面，但如果启用了 js，则可以返回 false以防止导航到链接并在同一页面内显示某些内容而无需刷新页面。

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

【参考方案5】：

功能上有所不同，第一个不尝试处理链接。第二个可以。

但是，我同意 Coronatus - 这两种方法都不理想。我建议研究不显眼的 JavaScript（可能使用 jQuery），因为您可以动态地向元素添加点击事件。

【参考方案6】：

如果您的网站需要 Javascript 才能正常运行，那么最好使用 href 中的 Javascript，因为它会在状态栏中显示链接并保持代码紧凑。在 href 中还提供了没有鼠标的键盘导航。如果您的网站需要在没有 Javascript 的情况下运行，那么您必须使用 onclick 以便 href 可以在其中包含链接。在单独的 Javascript 文件中添加操作无法紧密绑定代码和数据。