提问人：sheats 提问时间：10/9/2008 最后编辑：Monolosheats 更新时间：6/10/2013 访问量：1250
更改 <a> 标记行为的正确方法是什么？
What is the right way to change the behavior of an <a> tag?
问：
我想通过 onclick 事件创建一个链接调用 Javascript 函数，而不是做任何其他事情（点击链接）。最好的方法是什么？我通常这样做：
<a href="#" onclick="foo()">Click</a>
但我不确定这是最好的方法，在这种情况下，它正在导航到 page.html#，这对我正在做的事情不利。
答：
0赞
Chris Cudmore
10/9/2008
#1
<a href="javascript: foo()" >Click</a>
评论
0赞
Chris Cudmore
10/9/2008
为什么这被否决了？我不在乎积分，但我想知道出了什么问题。
0赞
nickf
10/9/2008
这不是最好的答案。请看安德鲁·摩尔的回答。stackoverflow.com/questions/184858#184916
6赞
Avdi
10/9/2008
#2
只需确保从 onclick 处理程序返回即可。F.D.（英语：F.D.） 应定义为：falsefoo()
function foo() {
// ... do stuff
return false;
}
有人在评论中指出，您可能需要稍微更改 HTML 才能正常工作：
<a href="#" onclick="return foo()">Click</a>
或者只是把它放在 HTML 中：
<a href="#" onclick="foo(); return false;">Click</a>
评论
0赞
Lou Franco
10/9/2008
如果你这样做，我认为你需要将链接的 onclick 更改为“return Foo（）;”
0赞
John Rudy
10/9/2008
返回的目的是为了防止页面尝试导航到不存在的锚点而出错吗？
0赞
Joe Skora
10/9/2008
是的，返回 false 会告诉浏览器毕竟不要点击链接。您也可以使用它进行验证，如果一切正常，则返回 true，如果一切正常，则返回 false。
1赞
Quentin
10/9/2008
如果 JavaScript 失败，则替代内容是指向页面顶部的链接。这很少有意义。
0赞
Lou Franco
10/9/2008
#3
调用 foo（） 后返回 false
-2赞
Rob Drimmie
10/9/2008
#4
如果包括
return false;
从 onclick 事件中，则页面根本不会加载。例如：
<a href="#" onclick="foo();return false;">Click</a>
或者在函数本身中：
function foo() {
// other stuff
return false;
}
-2赞
Matt Brunell
10/9/2008
#5
设置 href 属性以执行 javascript。喜欢这个：
<a href="javascript:foo()">Click</a>
这样一来，你们所有人都可以按预期工作：悬停CSS样式。
2赞
swilliams
10/9/2008
#6
问题是它会将浏览器抛到页面顶部。您可以执行以下操作：href="#"
<a href="javascript:foo()">clicky</a>
尽管越来越多的人建议不要这样做（分层分离）。更好的方法，使用 Prototype（在 JQuery 等人中同样简单）：
<a id="foo" href="#">clicky</a>
$('foo').observe('click', function(evt) {
foo();
evt.stop(); // keeps it from navigating to the href url
});
评论
0赞
swilliams
10/9/2008
等一下，返回 false 没有我预期的行为......现在查一下。
3赞
Tom
10/9/2008
#7
首先，有两种方法可以设置 href - 您可以按照上面所述的方式使用 href 引用 '#'，也可以将 href 设置为引用 “javascript：;”
其次，我总是建议将 JavaScript 保存在外部文件中，然后在那里管理事件处理程序。假设您想在页面加载时进行设置，您可以执行如下操作：
window.onload = {
var myLink = document.getElementById('myLinkID');
myLink.onclick = function(evt) {
var evt = (evt) ? evt : ((event) ? event : null); // for cross-browser issues
evt.preventDefault();
evt.stopPropagation();
foo();
}
}
评论
0赞
eyelidlessness
10/15/2008
event.preventDefault 或 null.preventDefault 会发生什么情况？
0赞
Tom
10/15/2008
@eyelidlessness - 我可能误解了你的问题，但上面的三元运算符确保你得到对现有对象的引用，因此 evt.preventDefault（） 将在主要浏览器上运行。无论如何，它将取消事件，而不会停止事件的传播。
18赞
Andrew Moore
10/9/2008
#8
通常，您应该始终有一个回退链接，以确保禁用了 JavaScript 的客户端仍然具有某些功能。这个概念称为不显眼的 JavaScript。例。。。假设您有以下搜索链接：
<a href="search.php" id="searchLink">Search</a>
您始终可以执行以下操作：
var link = document.getElementById('searchLink');
link.onclick = function() {
try {
// Do Stuff Here
} finally {
return false;
}
};
这样，禁用了 javascript 的用户将被定向到 search.php，而使用 JavaScript 的查看者会查看您的增强功能。
编辑：正如 nickf 在评论 #2 中指出的那样，如果您的处理程序中出现错误，尝试和捕获将阻止链接跟随。
评论
0赞
Ates Goral
10/9/2008
升级了。如果您真的在寻找最佳解决方案，就是这样。你应该将你的HTML（演示文稿）与你的JavaScript（逻辑）分离。从普通链接开始，然后添加单击事件处理程序。
0赞
nickf
10/9/2008
+1.这是正确的方法。我唯一要补充的是，如果您的 onclick 处理程序中存在 JS 错误，它将不会返回 false，因此将遵循该链接。为了避免这种情况，将整个函数包装在一个 try 块中：“try { // 在这里做事 } finally { return false;
0赞
Quentin
10/9/2008
如果处理程序中存在错误，则通常希望跟踪该链接。“在 JS 中执行或回退到服务器”比“在 JS 中执行或出错或回退到服务器”更好
0赞
Andrew Moore
10/9/2008
Dorward，“在 JS 中执行或回退到服务器”的问题在于它使调试变得困难。
0赞
roenving
10/9/2008
#9
很多混淆都是关于a标签的使用，因为它们跨浏览器支持：hover伪css选择器...
因此，使用 a 标签通常是显而易见的，因为它会根据鼠标悬停的不同阶段呈现不同的内容......
有些人会声称 ：hover 伪标签中内置的功能根本不应该可用，因为 W3C 的意图是将动态 html 的三个部分中的内容、视觉呈现和功能分开;HTML、CSS 和 JavaScript。
但现在我们坚持使用它，目前它以多种方式使用 a-tags 是有效的，因为它们以简单的方式完成任务，而且它是右前跨浏览器的！
但这意味着您有时必须禁用这些链接标签的默认行为，这意味着您必须使 onclick-event 返回 false，当更改当前文档的内容没有意义时......
但是，可以使用关闭默认行为的很好的例子，例如即使用户禁用了javascript，也可以提供具有某些属性的弹出窗口：
<a href="http://en.wikipedia.org/wiki/Css" onclick="window.open(this.href,'_blank','width=600,height=450,status=no');return false;">Show wikipedia css</a>
-1赞
Tivac
10/9/2008
#10
当心只是使用
<a href="#">Click</a>
因为它可能会导致令人讨厌的 IE6 问题。
我总是建议使用一个不指向任何内容的锚点。我喜欢用这个
<a href="#MAGIC">Click</a>
因为它让我发笑。
上一个：阻止直接访问 PHP 页面
下一个：在用户向下滚动时加载内容
评论