我见过在 <a> 标签中嵌入 JavaScript 代码的以下方法：
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>在假设用户已启用JavaScript的情况下，为了让代码具有可读性和调试性，我个人喜欢选项2。虽然一些人推荐选项4，因为它提供给用户一个“真正的”链接，但实际上，“#”并不是一个“真正的”链接，它什么也不会做。以上四种方法在已启用JavaScript时都能使用。
我非常喜欢Matt Kruse的JavaScript最佳实践文章。在其中，他指出使用 href 属性来执行JavaScript代码是一个不好的主意。即使你已经声明你的用户必须启用JavaScript，也没有理由不提供一个简单的HTML页面作为所有JavaScript链接的指向，以备某些人在登录后禁用了JavaScript。我强烈建议您仍然允许这种回退机制。像这样做将遵循“最佳实践”，并实现您的目标：
<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
如果可以使用addEventListener/attachEvent，为什么要这样做呢？如果没有href等价物，请不要使用<a>标签，而是使用<button>标签并相应地进行样式设置。
你忘记了另一种方法：
5: <a href="#" id="myLink">Link</a>
document.getElementById('myLink').onclick = function() {
// Do stuff.
};
我不能评论哪个选项有最好的支持或哪个在语义上最好，但我只想说我更喜欢这种样式，因为它将你的内容与JavaScript代码分开。它将所有的JavaScript代码放在一起，这样更容易维护（特别是如果你应用到很多链接中），你甚至可以将它放在一个外部文件中，然后打包以减小文件大小并被客户端浏览器缓存。
<a href="#" onClick="DoSomething(); return false;">link</a>
<a href="#" id = "Link">link</a>
(document.getElementById("Link")).onclick = function() {
DoSomething();
return false;
};
根据情况而定。对于较大的应用程序，第二个选项是最好的，因为它可以 consolide 事件代码。
<!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://dev59.com/-GYq5IYBdhLWcg3weAaj#14461672 -->
<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://dev59.com/-GYq5IYBdhLWcg3weAaj#14461672 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">
</body>
</html>
您可以在文档准备就绪之前运行此操作，单击按钮将起作用，因为我们将事件附加到文档。
来源：
我注意到的一个区别是：
<a class="actor" href="javascript:act1()">Click me</a>
<a class="actor" onclick="act1();">Click me</a>
如果在任一情况下您都有：
<script>$('.actor').click(act2);</script>
对于第一个例子，act2将在act1之前运行；而在第二个例子中，则相反。
方法二在FF3和IE7中存在语法错误。 我更喜欢方法一和方法三，因为方法四会用'#'污染URI，尽管打字较少... 显然，正如其他回复所指出的那样，最好的解决方案是将HTML与事件处理分开。
return false，方法#4不会破坏URI，因此可能是最好的（列出的方法中）。 - Már Örlygsson