将JavaScript代码放在<a>的不同方法之间有什么区别？
我已经看到了将JavaScript代码放入<a>标签的下列方法：
function DoSomething() { ... return false; }
-
<a href="javascript:;" onClick="return DoSomething();">link</a> -
<a href="javascript:DoSomething();">link</a> -
<a href="javascript:void(0);" onClick="return DoSomething();">link</a> -
<a href="#" onClick="return DoSomething();">link</a>
我明白试图放置一个有效的url而不仅仅是JavaScript代码的想法，以防万一用户没有启用JavaScript。 但是为了这个讨论的目的，我需要假定JavaScript已经启用了（没有它，他们就不能login）。
我个人喜欢选项2，因为它可以让你看到将要运行的东西 – 尤其是在debugging传递给函数的参数时有用。 我用了很多，没有发现浏览器问题。
我已经读过，人们推荐4，因为它给用户一个真正的链接，但真的，＃不是“真正的”。 它绝对不会在哪里。
当你知道用户启用了JavaScript时，有没有不支持或者是非常糟糕的？
相关问题： Href for JavaScript链接：“＃”或“javascript：void（0）”？ 。
我非常喜欢Matt Kruse的Javascript最佳实践文章 。 其中，他表示，使用href节来执行JavaScript代码是一个坏主意。 即使您已经声明您的用户必须启用JavaScript，但如果有人在login后closuresJavaScript，则没有任何理由不能为您的JavaScript链接指向其href部分的简单HTML页面我强烈build议你仍然允许这个回退机制。 像这样的东西将坚持“最佳实践”，并实现您的目标：
<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
为什么当你可以使用addEventListener / attachEvent呢？ 如果没有等效的href ，请不要使用<a> ，使用<button>并相应地设置它。
你忘了另一种方法：
5: <a href="#" id="myLink">Link</a>
使用JavaScript代码：
document.getElementById('myLink').onclick = function() { // Do stuff. };
我不能评论哪个选项具有最好的支持，哪个选项在语义上是最好的，但我只是说我更喜欢这种风格，因为它将您的内容从JavaScript代码中分离出来。 它将所有的JavaScript代码保存在一起，这更容易维护（特别是如果你正在将它应用到许多链接），甚至可以把它放在一个外部文件中，然后打包，以减less客户端浏览器的文件大小和caching。
<a href="#" onClick="DoSomething(); return false;">link</a>
我会这样做，或者：
<a href="#" id = "Link">link</a> (document.getElementById("Link")).onclick = function() { DoSomething(); return false; };
根据情况而定。 对于更大的应用程序，第二个是最好的，因为它然后合并您的事件代码。
方法＃2在FF3和IE7中有语法错误。 我更喜欢方法＃1和＃3，因为＃4用'＃'弄脏URI虽然导致更less的键入…显然，正如其他响应所指出的，最好的解决scheme是单独的html与事件处理。
只有现代浏览器
<!DOCTYPE html> <html> <head> <script type="text/javascript"> (function(doc){ var hasClass = function(el,className) { return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1; } doc.addEventListener('click', function(e){ if(hasClass(e.target, 'click-me')){ e.preventDefault(); doSomething.call(e.target, e); } }); })(document); function doSomething(event){ console.log(this); // this will be the clicked element } </script> <!--... other head stuff ...--> </head> <body> <!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 --> <button class="click-me">Button 1</button> <input class="click-me" type="button" value="Button 2"> </body> </html>
跨浏览器
<!DOCTYPE html> <html> <head> <script type="text/javascript"> (function(doc){ var cb_addEventListener = function(obj, evt, fnc) { // W3C model if (obj.addEventListener) { obj.addEventListener(evt, fnc, false); return true; } // Microsoft model else if (obj.attachEvent) { return obj.attachEvent('on' + evt, fnc); } // Browser don't support W3C or MSFT model, go on with traditional else { evt = 'on'+evt; if(typeof obj[evt] === 'function'){ // Object already has a function on traditional // Let's wrap it with our own function inside another function fnc = (function(f1,f2){ return function(){ f1.apply(this,arguments); f2.apply(this,arguments); } })(obj[evt], fnc); } obj[evt] = fnc; return true; } return false; }; var hasClass = function(el,className) { return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1; } cb_addEventListener(doc, 'click', function(e){ if(hasClass(e.target, 'click-me')){ e.preventDefault ? e.preventDefault() : e.returnValue = false; doSomething.call(e.target, e); } }); })(document); function doSomething(event){ console.log(this); // this will be the clicked element } </script> <!--... other head stuff ...--> </head> <body> <!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 --> <button class="click-me">Button 1</button> <input class="click-me" type="button" value="Button 2"> </body> </html>
您可以在文档准备就绪之前运行此操作，单击button将起作用，因为我们将事件附加到文档。
资料来源：
- testing一个元素是否包含一个类？
- event.preventDefault（）函数在IE中不起作用
- https://gist.github.com/eduardocereto/955642
我注意到这一点之间的一个区别：
<a class="actor" href="javascript:act1()">Click me</a>
和这个：
<a class="actor" onclick="act1();">Click me</a>
是，如果在任何情况下你有：
<script>$('.actor').click(act2);</script>
那么对于第一个例子， act1将在act1之前运行，而在第二个例子中，则是相反的。
