在href与onclick的JavaScript函数
我想在没有任何redirect的情况下在点击上运行一个简单的JavaScript函数。
将JavaScript调用放入href属性中有什么区别或好处（如下所示：
<a href="javascript:my_function();window.print();">....</a>
）把它放在onclick属性（绑定到onclick事件）？
将onclick放在href中会触犯那些坚信内容与行为/行为分离的人。 争论的是你的html内容应该只关注内容，而不是展示或行为。
这些日子的典型path是使用一个JavaScript库（例如jQuery），并使用该库创build一个事件处理程序。 它看起来像这样：
$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
坏：
<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; });
就javascript而言 ，一个区别是onclick处理程序中的this关键字将引用其onclick属性（在本例中为<a>元素）的DOM元素，而href属性中的this关键字将引用window对象。
就performance而言 ，如果链接中缺lesshref属性（即<a onclick="[...]"> ），那么默认情况下，浏览器将显示text光标（而不是通常期望的pointer光标）因为它将<a>作为锚点，而不是链接。
就行为而言 ，当通过href导航来指定一个动作时，浏览器通常会支持使用快捷键或上下文菜单在单独的窗口中打开该href 。 仅在通过onclick指定操作时，这是不可能的。
但是，如果您问什么是从DOM对象的点击中获得dynamic操作的最佳方式，那么使用独立于文档内容的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>
除此之外，浏览器的状态栏上显示的是href，而不是onclick。 我认为在那里显示javascript代码不是用户友好的。
最好的办法是：
<a href="#" onclick="someFunction(e)"></a>
问题是这会在浏览器的页面末尾添加一个散列（＃），因此需要用户点击后退button两次才能进入页面之前的页面。 考虑到这一点，您需要添加一些代码来停止事件传播。 大多数JavaScript工具包已经有了这个function。 例如，dojo工具包使用
dojo.stopEvent(event);
这样做。
它使用这行代码对我工作：
<a id="LinkTest" title="Any Title" href="#" onclick="Function(); return false; ">text</a>
拥有javascript:在任何不是专门用于脚本的属性都是HTML的过时方法。 虽然技术上它工作，你仍然分配JavaScript属性非脚本属性，这是不好的做法。 它甚至可能会在旧的浏览器，甚至是一些现代的浏览器上失败（一个谷歌search似乎表明，歌剧不喜欢'javascript：'url）。
第二种方法是将JavaScript放到onclick属性中，如果没有脚本function，则忽略这个属性。 在href字段中放置一个有效的URL（通常是“＃”），以便那些没有javascript的用户回退。
就我个人而言，我发现在HREF标记恼人的JavaScript调用。 我通常不会真正注意到某个东西是否是一个JavaScript链接，而且往往要在新的窗口中打开东西。 当我尝试使用这些types的链接之一进行操作时，我得到一个没有任何内容的空白页面，并在我的位置栏中显示javascript。 然而，这是通过使用onlick一点回避。
还有一件事，我注意到，当使用JavaScript的“href”：
如果两次点击之间的时间差很短，“href”属性中的脚本将不会执行。
例如，尝试运行以下示例，并在每个链接上双击（快速！）。 第一个链接将只执行一次。 第二个链接将被执行两次。
<script> function myFunc() { var s = 0; for (var i=0; i<100000; i++) { s+=i; } console.log(s); } </script> <a href="javascript:myFunc()">href</a> <a href="#" onclick="javascript:myFunc()">onclick</a>
在Chrome（双击）和IE11（三击）中转载。 在Chrome中，如果点击速度够快，则可以进行10次点击，并且只有1个function执行。
Firefox工作正常。
最好的答案是一个非常糟糕的做法，永远不要链接到一个空的散列，因为它可能会造成问题的道路上。
最好的办法就是像许多其他人所说的那样将一个事件处理程序绑定到这个元素上，然而， <a href="javascript:doStuff();">do stuff</a>在每个现代浏览器中都是完美的，我广泛使用它在渲染模板时避免重新绑定每个实例。 在某些情况下，这种方法提供了更好的性能。 因人而异
另一个有趣的tid-bit ….
当直接调用javascript时， onclick和href有不同的行为。
onclick会正确传递this上下文，而href不会，或换句话说<a href="javascript:doStuff(this)">no context</a>将不起作用，而<a onclick="javascript:doStuff(this)">no context</a>将会。
是的，我省略了href 。 虽然这不符合规范，但它将在所有浏览器中工作，但理想情况下它应该包含一个href="javascript:void(0);" 好的措施
