我想在没有任何重定向的情况下单击运行一个简单的 JavaScript 函数。
将 JavaScript 调用放在href属性中是否有任何区别或好处（如下所示：
<a href="javascript:my_function();window.print();">....</a>
) 与将它放在onclick属性中（将其绑定到onclick事件）？
href 与 onclick 中的 JavaScript 函数
IT技术
javascript
href
2021-02-03 02:05:22
6个回答
坏的：
<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; });
将 onclick 放在 href 中会冒犯那些坚信将内容与行为/行动分开的人。争论是你的 html 内容应该只关注内容，而不是表现或行为。
现在的典型路径是使用 javascript 库（例如 jquery）并使用该库创建事件处理程序。它看起来像：
$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
在方面的javascript，一个区别是，this在关键字onclick处理程序将参考DOM元素，其onclick属性是（在这种情况下，<a>元件），而this在href属性将参考window对象。
就表示而言，如果href链接中没有属性（即<a onclick="[...]">），则默认情况下，浏览器将显示text光标（而不是经常需要的pointer光标），因为它将<a>视为锚点，而不是链接。
在行为方面，当通过导航通过 指定操作时href，浏览器通常支持href使用快捷方式或上下文菜单在单独的窗口中打开该操作。仅通过 指定操作时这是不可能的onclick。
但是，如果您要问从 DOM 对象的单击中获得动态操作的最佳方法是什么，那么使用与文档内容分开的 javascript 附加事件是最好的方法。您可以通过多种方式做到这一点。一种常见的方法是使用 jQuery 之类的 javascript 库来绑定事件：
<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>
我用
Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>
很长的路要走，但它可以完成工作。使用 A 样式来简化然后它变成：
<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style>
<a nohref onClick="alert('Hello World')">HERE</a>
最佳答案是一种非常糟糕的做法，永远不要链接到空哈希，因为它可能会在未来产生问题。
最好是将事件处理程序绑定到元素，正如许多其他人所说，但是，<a href="javascript:doStuff();">do stuff</a>在每个现代浏览器中都可以完美运行，并且我在渲染模板时广泛使用它以避免必须为每个实例重新绑定。在某些情况下，此方法可提供更好的性能。青年会
另一个有趣的花絮......
onclick&href直接调用 javascript 时有不同的行为。
onclick将this正确传递上下文，而href不会，或者换句话说<a href="javascript:doStuff(this)">no context</a>不会起作用，而<a onclick="javascript:doStuff(this)">no context</a>会。
是的，我省略了href. 虽然这不符合规范，但它适用于所有浏览器，但理想情况下它应该包含一个href="javascript:void(0);"很好的衡量标准