Javascript 改变<；a>；标签？

我希望通过onclick事件对Javascript函数进行链接调用，而不做任何其他事情（遵循链接）。最好的方法是什么？我通常这样做：

<a href="#" onclick="foo()">Click</a>

但我不确定这是不是最好的方法，在本例中，它是导航到page.html，这对我正在做的事情没有好处

<a href="javascript: foo()" >Click</a>

只需确保从onclick处理程序返回

false

。例如，

foo（）

应定义为：

function foo() {
  // ... do stuff
  return false;
}

有人在评论中指出，您可能需要稍微更改HTML才能正常工作：

<a href="#" onclick="return foo()">Click</a>

或者将其放入HTML：

<a href="#" onclick="foo(); return false;">Click</a>

---

调用foo（）后返回false

如果包括

return false;

从onclick事件中，则根本不会加载页面。例如：

<a href="#" onclick="foo();return false;">Click</a>

---

设置href属性以执行javascript。像这样：

---

这样，您的所有a:hover CSS样式都能按预期工作。

href=“#”的问题在于它会将浏览器置于页面顶部。你可以做：

<a href="javascript:foo()">clicky</a>

尽管越来越多的人反对这样做（分层）。更好的方法是使用（在JQuery等中同样简单）：

$（'foo'）。观察（'click'，函数（evt）{
foo（）；
evt.stop（）；//阻止它导航到href url
}); 

首先，有两种方法可以设置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();
    }
}

---

通常，您应该始终有一个回退链接，以确保禁用JavaScript的客户端仍然具有一些功能。这个概念被称为不引人注目的JavaScript。例子。。。假设您有以下搜索链接：

<a href="search.php" id="searchLink">Search</a>

这样，禁用javascript的用户将被引导到search.php，而使用javascript的查看器将查看您的增强功能

---

编辑：正如注释2中所指出的，如果处理程序中存在错误，则尝试捕获将阻止链接跟随。

关于a标记的使用存在很多困惑，因为它们跨浏览器支持：悬停伪css选择器

因此，使用a标签通常是显而易见的，因为它会根据鼠标悬停的不同阶段进行不同的渲染

有些人会声称：hover伪标记中内置的功能根本不可用，因为W3C的意图是将动态html的三个部分中的内容、视觉表示和功能分离开来；html、css和javascript

但目前我们仍在使用它，而且目前在很多方面都可以使用a标签，因为它们以一种简单的方式完成任务，而且是跨浏览器的！）

但这意味着您有时必须禁用这些链接标记的默认行为，这意味着您必须使onclick事件返回false，如果更改当前文档的内容没有意义

不管如何，我们可以举一个很好的例子来说明如何使用默认行为，例如，即使用户禁用了javascript，也可以提供一个具有特定属性的弹出窗口：

<a href="http://en.wikipedia.org/wiki/Css" target="_blank" onclick="window.open(this.href,'_blank','width=600,height=450,status=no');return false;">Show wikipedia css</a>

小心使用

因为它会引起令人讨厌的后果

我总是建议使用指向零的锚。我喜欢用这个

---

因为它让我发笑。

如果这样做，我认为需要将链接的onclick更改为“return Foo（）；”return false的目的是防止页面尝试导航到不存在的锚点吗？是的，返回false告诉浏览器毕竟不要跟随链接。您也可以使用它进行验证，如果一切正常，则返回true，否则返回false。如果JavaScript失败，则替代内容是指向页面顶部的链接。这很少有意义。等一下，返回false没有我期望的行为。。。现在查一下，升级了。如果你真的在寻找最好的解决方案，这就是它。您应该将HTML（表示）与JavaScript（逻辑）解耦。从普通链接开始，然后添加click事件处理程序。+1。这是正确的做法。我要补充的唯一一点是，如果onclick处理程序中存在JS错误，它将不会返回false，因此将遵循链接。为了避免这种情况，请将整个函数包装在一个try块中：“try{//do stuff here}finally{return false；}”如果处理程序中有错误，那么您通常希望遵循链接。“在JS中执行或退回到服务器”比“在JS中执行或出现错误或退回到服务器”更好Dorward，“在JS中执行或退回到服务器”的问题是它使调试变得困难。为什么会被否决？我不在乎要点，但我想知道问题出在哪里。这不是最好的答案。见安德鲁·摩尔的答案。event.preventDefault或null.preventDefault会发生什么情况？@Epildless-我可能误解了你的问题，但上面的三元运算符确保你获得了对现有对象的引用，因此evt.preventDefault（）将在主要浏览器中工作。无论如何，它将在不停止事件传播的情况下取消事件。

<a href="search.php" id="searchLink">Search</a>

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

<a href="http://en.wikipedia.org/wiki/Css" target="_blank" onclick="window.open(this.href,'_blank','width=600,height=450,status=no');return false;">Show wikipedia css</a>