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

通常,您应该始终有一个回退链接,以确保禁用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;
    }
};

编辑: 像 nickf 注释2中指出,如果处理程序中存在错误,则try-and-catch将阻止链接跟随。

一定要回来 false foo() 应定义为:

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

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

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

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

问题在于 href="#"

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

尽管越来越多的人反对这样做(分层)。更好的方法是使用 Prototype

<a id="foo" href="#">clicky</a>

$('foo').observe('click', function(evt) { 
  foo();
  evt.stop(); // keeps it from navigating to the href url
}); 

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

调用foo()后返回false

关于A标签的使用有很多困惑,因为它们跨浏览器支持:hover pseudo css选择器。。。

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

但这意味着您有时必须禁用这些链接标记的默认行为,这意味着您必须使onclick事件返回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>

小心使用

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

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

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

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

因为它让我发笑。

如果包括

return false;

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

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

或者在函数本身中:

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

设置href属性以执行javascript。这样地:

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