更改<a>标记行为的正确方法是什么？

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的查看者会查看您的增强功能.

编辑:正如nickf在评论#2中指出的那样,如果处理程序中存在错误,则try和catch将阻止链接跟随.

Answer 2

只需确保false从onclick处理程序返回.例如foo()应定义为:

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

有人在评论中指出,您可能需要稍微更改HTML以使其正常工作:

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

或者只是把它放在HTML中:

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