Question

我想通过onclick事件调用Javascript函数链接，而不是做任何事情（点击链接）。最好的方法是什么？我经常这样做：

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

但我不确定这是最好的方式，在这种情况下，它导航到page.html＃，这对我正在做的事情并不好。

Answer 1

通常，您应始终使用后备链接以确保禁用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的观看者会查看您的增强功能。

修改：正如评论＃2中指出的nickf一样，如果您的处理程序中存在错误，则try和catch会阻止链接跟随。

Answer 2

确保从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>

Answer 3

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

Answer 4

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
});

Answer 5

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

Answer 6

在调用foo（）

后返回false

Answer 7

很多混淆是围绕使用a-tags，因为它们跨浏览器支持：hover pseudo-css-selector ...

因此，使用a-tag通常很明显，因为它会根据鼠标悬停的不同阶段呈现不同的颜色......

有人会声称内置于：hover伪标签的功能根本不可用，因为W3C的目的是将动态html的三个部分中的内容，视觉呈现和功能分开; html，css和javascript。

但是现在我们仍然坚持使用它，暂时可以通过很多方式使用a-tags，因为它们以简单的方式完成任务，而且它是正确的跨浏览器！ - ）

但这意味着您有时必须禁用这些链接标记的默认行为，这意味着当更改当前内容没有意义时，您必须使onclick-event返回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>

Answer 8

小心使用

<a href="#">Click</a>

因为它会引起令人讨厌的IE6 problem。

我总是建议使用一个没有任何意义的锚。我喜欢用这个

<a href="#MAGIC">Click</a>

因为它让我发笑。

Answer 9

如果你包括

return false;

来自onclick事件，然后页面根本不会加载。例如：

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

或者在函数本身中：

function foo() {
  // other stuff
  return false;
}

Answer 10

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

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

这样你所有的a：悬停CSS样式都按预期工作。

改变<a> tag?</a>行为的正确方法是什么？

10 个答案: