JavaScript - href 与 onclick 用于超链接上的回调函数

Question

我想在没有任何重定向的情况下通过单击运行一个简单的 JavaScript 函数。

将 JavaScript 调用放在 href 属性之间有什么区别或好处吗（像这样）：

 <a href="javascript:my_function();window.print();">....</a>

与将其放入 onclick 属性（将其绑定到 onclick 事件）？

原文由 SkunkSpinner 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将 onclick 放在 href 中会冒犯那些坚信内容与行为/动作分离的人。争论的焦点是您的 html 内容应该只关注内容，而不是表现或行为。

这些天的典型路径是使用 javascript 库（例如 jquery）并使用该库创建事件处理程序。它看起来像：

 $('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

原文由 Parand 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

坏的：

 <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>

更好的 1：

 <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>

为什么更好？因为 return false 会阻止浏览器访问链接

最好的：

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

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

原文由 demp 发布，翻译遵循 CC BY-SA 3.0 许可协议