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

Question

我已经看到了以下将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已启用（没有JavaScript，它们将无法登录）。我个人喜欢选项2，因为它使您可以查看将要运行的内容–在调试将参数传递给函数的位置时特别有用。我已经使用了很多，还没有发现浏览器问题。我读过人们推荐4，因为它给用户提供了一个真正的链接，但是＃并不是“真实的”。绝对不会到哪里去。当您知道用户已启用JavaScript时，是否存在不支持或非常糟糕的应用？

Answer 1

我非常喜欢Matt Kruse的Javascript Best Practices文章。他在其中指出，使用该href部分执行JavaScript代码是一个坏主意。即使您已经声明用户必须启用JavaScript，但也没有理由没有一个简单的HTML页面，href如果有人在登录后碰巧关闭了JavaScript ，则所有JavaScript链接都可以指向其部分。我强烈建议您仍然允许这种备用机制。这样的事情将遵循“最佳实践”并实现您的目标：

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

Answer 2

可以使用addEventListener/ 时为什么要这样做attachEvent？如果没有href-equivalent，则不要使用和<a>，<button>并相应地设置其样式。

Answer 3

您忘记了另一种方法：

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

使用JavaScript代码：

document.getElementById('myLink').onclick = function() {

    // Do stuff.

};

我无法评论哪个选项提供了最好的支持，或者哪个语义上是最好的，但是我只是说我更喜欢这种样式，因为它可以将您的内容与JavaScript代码分开。它将所有JavaScript代码保持在一起，这很容易维护（特别是如果您将其应用到许多链接上），甚至可以将其放在一个外部文件中，然后将其打包以减小文件大小并由客户端浏览器缓存。

Answer 4

<a href="#" onClick="DoSomething(); return false;">link</a>

我将这样做，或者：

<a href="#" id = "Link">link</a>

(document.getElementById("Link")).onclick = function() {

    DoSomething();

    return false;

};

视情况而定。对于较大的应用程序，第二个最好，因为这样可以合并您的事件代码。