将JavaScript代码放在<a>中的不同方法之间有什么区别？

Question

我已经看到了将JavaScript代码放入<a>标记的以下方法:

function DoSomething() { ... return false; }

1. <a href="javascript:;" onClick="return DoSomething();">link</a>
2. <a href="javascript:DoSomething();">link</a>
3. <a href="javascript:void(0);" onClick="return DoSomething();">link</a>
4. <a href="#" onClick="return DoSomething();">link</a>

我理解尝试放置有效URL而不仅仅是JavaScript代码的想法,以防用户没有启用JavaScript.但是为了讨论的目的,我需要假设启用了JavaScript(没有它就无法登录).

我个人喜欢选项2,因为它可以让你看到将要运行的内容 - 在调试传递给函数的参数时尤其有用.我已经使用了很多,并没有发现浏览器问题.

我读过人们推荐4,因为它给了用户一个真实的链接,但实际上,#不是"真实的".它绝对不会在哪里.

当您知道用户启用了JavaScript时,是否有一个不支持或非常糟糕？

相关问题:JavaScript链接的Href:"#"或"javascript:void(0)"？.

Answer 1

我非常喜欢Matt Kruse的Javascript Best Practices文章.在其中,他声称使用该href部分执行JavaScript代码是一个坏主意.即使您已声明您的用户必须启用了JavaScript,但href如果有人在登录后出现关闭JavaScript的情况,您也无法拥有所有JavaScript链接指向其所在部分的简单HTML页面.我强烈建议你继续允许这种后备机制.这样的事情将遵循"最佳实践"并实现您的目标:

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>

Answer 2

为什么要在使用addEventListener/ attachEvent？时这样做？如果没有href等价,请不要使用a <a>,使用a <button>并相应地设置样式.

Answer 3

你忘记了另一种方法：

5: <a href="#" id="myLink">Link</a>

使用 JavaScript 代码：

document.getElementById('myLink').onclick = function() {
    // Do stuff.
};

我无法评论哪些选项支持最好，哪些在语义上最好，但我只想说我更喜欢这种风格，因为它将您的内容与您的 JavaScript 代码分开。它将所有 JavaScript 代码保存在一起，这更容易维护（尤其是当您将其应用于许多链接时），您甚至可以将其放在一个外部文件中，然后可以将其打包以减少文件大小并由客户端浏览器缓存。