将 JavaScript 代码放入 <a> 的不同方法有啥区别？
Posted
技术标签:
【中文标题】将 JavaScript 代码放入 <a> 的不同方法有啥区别？【英文标题】：What is the difference between the different methods of putting JavaScript code in an <a>?将 JavaScript 代码放入 <a> 的不同方法有什么区别？ 【发布时间】：2010-09-19 17:45:35 【问题描述】：我见过以下将 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 已启用（没有它他们无法登录）。
我个人喜欢选项 2，因为它允许您查看将要运行的内容——在调试有参数传递给函数的位置时尤其有用。我用了很多次，没有发现浏览器问题。
我读过人们推荐 4，因为它为用户提供了一个真正的链接来关注，但实际上，# 不是“真实的”。它绝对不会去哪里。
当您知道用户启用了 JavaScript 时，是否存在不支持或非常糟糕的功能？
相关问题：Href for JavaScript links: “#” or “javascript:void(0)”?。
【问题讨论】：
小语法问题：选择 #2 应该是 - link 没有“return” 请将接受的答案更改为@eyelidlessness 答案。我认为这是最好的方法，因为它关心语义。 【参考方案1】：我很喜欢Matt Kruse's Javascript Best Practices article。在其中，他指出使用 href 部分执行 JavaScript 代码是一个坏主意。即使您已声明您的用户必须启用 JavaScript，但如果有人碰巧关闭 JavaScript登录。我强烈建议您仍然允许这种后备机制。这样的事情将遵循“最佳实践”并实现您的目标：
<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
【讨论】：
因为 href 值会在状态栏中显示给用户？ （底部的栏）我会考虑使用更用户友好的链接，例如。 “js.html?doSomething”页面仍然可以是静态html。这样用户将清楚地看到链接之间的差异。 你可以用 title 属性覆盖这个值，例如go 最好将请求记录到 javascript_required.html 页面并记录导致错误的函数。 您考虑过 SEO 的后果吗？ Matt Kruse 的 javascripttoolbox.com 似乎下线并出售。【参考方案2】：既然可以使用addEventListener/attachEvent，为什么还要这样做？如果没有 href 等效项，请不要使用 <a>，使用 <button> 并相应地设置样式。
【讨论】：
在很多情况下使用按钮而不是链接并不是一个可行的选择。 因为它看起来很丑。您可以在链接旁边添加一个图标。它们很难在浏览器中格式化相同的格式。通常，人们正在转向链接而不是按钮——看看大部分堆栈溢出。 看起来很难看？它看起来像任何你想要的样子。事实上，我认为按钮实际上比链接具有更大的样式灵活性，因为它们是内联的，但可以正确地跨浏览器进行填充。就 CSS 而言，任何可以通过链接完成的事情都可以通过按钮完成。 Span 不能以键盘为中心。 并且按钮在语义上是（喘气）正确的。跨度在语义上没有意义。从语义上讲，按钮正是作者打算使用的。【参考方案3】：你忘记了另一个方法：
5: <a href="#" id="myLink">Link</a>
使用 JavaScript 代码：
document.getElementById('myLink').onclick = function()
// Do stuff.
;
我无法评论哪个选项具有最好的支持或哪个在语义上最好，但我只想说我更喜欢这种风格，因为它将您的内容与 JavaScript 代码分开。它将所有 JavaScript 代码放在一起，这更容易维护（特别是如果您将其应用于许多链接），您甚至可以将其放在外部文件中，然后可以将其打包以减少文件大小并由客户端浏览器缓存。
【讨论】：
如果你有 20 或 30 个不同的 JS 链接，这可能会变得非常乏味并最终得到很多 JS。 这并不比通过 HTML 更改 javascript 更乏味。 ...或者您可以使用 jQuery 之类的东西，它可以轻松地一次更改多个元素上的事件... $('#menu a').click(function() .. ) @JKirchartz 如果答案背后有原因，我不明白它是如何说教的。如果您阅读该问题，那确实是“这4个中哪个最好”，而我只是指出还有一个他没有考虑过的选项。 别在意，trololo，在A B C和D之间选择时，不会选择E。 @JKirchartz 是的，我不认为你真的明白 Stack Overflow 的目的。如果有人问“用 Cobol 还是 Fortran 构建 Web 应用程序哪个更好？”告诉那个人他们没有考虑所有可能性是可以接受的。这个问题显然不是问“只有这四件事中哪一个是最好的”。【参考方案4】：<a href="#" onClick="DoSomething(); return false;">link</a>
我会这样做，或者：
<a href="#" id = "Link">link</a>
(document.getElementById("Link")).onclick = function()
DoSomething();
return false;
;
视情况而定。对于较大的应用程序，第二个是最好的，因为它整合了您的事件代码。
【讨论】：
如果你有 20 或 30 个不同的 JS 链接，这可能会变得非常乏味，最终会得到很多 JS。 并且潜入代码中的错误可能非常难以调试。正如您的第一个示例所证明的那样，这些错误很容易出现。 :)【参考方案5】：方法 #2 在 FF3 和 IE7 中存在语法错误。 我更喜欢方法#1 和#3，因为#4 用'#' 弄脏了URI，虽然会减少打字... 显然，正如其他回复所指出的，最好的解决方案是将 html 与事件处理分开。
【讨论】：
方法#2是什么？这些问题的顺序与您看到它们时的顺序不同。 方法#4 不会如果你确定return false会弄乱URI。出于这个原因，方法#4 可能是最好的（在列出的那些中）。
@Diodeus，我相信 Pier 指的是问题中的编号列表，实际上自从问题首先发布以来就一直存在。【参考方案6】：
我注意到这之间的一个区别：
<a class="actor" href="javascript:act1()">Click me</a>
还有这个：
<a class="actor" onclick="act1();">Click me</a>
如果在任何一种情况下你都有：
<script>$('.actor').click(act2);</script>
那么对于第一个示例，act2 将在 act1 之前运行，而在第二个示例中，则相反。
【讨论】：
【参考方案7】：仅限现代浏览器
<!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://***.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://***.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">
</body>
</html>
您可以在文档准备好之前运行它，单击按钮将起作用，因为我们将事件附加到文档。
来源：
Test if an element contains a class? event.preventDefault() function not working in IE https://gist.github.com/eduardocereto/955642【讨论】：
以上是关于将 JavaScript 代码放入 <a> 的不同方法有啥区别？的主要内容，如果未能解决你的问题，请参考以下文章
使用Javascript将文本从表单放入表中，当我单击按钮时它会消失