有时我们会遇到这种需要在a标签上添加click事件，并且跳转前处理一些事务,因此需要做一些处理，看很多人会这样写

<a href=”#”>link</a>，

但是发现点击后页面返回了顶部，所以又出现了这样的写法等

<a href=”###”>link</a>

但这样并不兼容所有浏览器，有些浏览器就会出现很怪异的形为。 因此，这个问题还需要其它方法来解决。

方法一

<a href=”javascript:void(0)”>百度</a>

void是一个操作符，void(0)返回undefined，地址不发生跳转

<a href=”javascript:;”>百度</a>

和以上相同，返回undefined

方法二 用return false

<a href=”http://baidu.com” onclick=”show()”>百度</a> <script>

function show(){

alert(“我没跳转”);

return false;

}</script>

执行完以上代码你会深刻领悟到js 的坑。 首先你要知道当onclick 后面的事件不是一个函数名时，它会被包裹到一个匿名函数中执行。 以上就相当于是

obj.onclick=function(){

show();

}

当点击链接的时候执行 onclick 里面的代码，而不是把show（）当作事件处理程序， return false 只是在 show() 这个函数中返回了并没有在 onclick 事件中返回。 因此还会发生跳转。

方法三 阻止默认事件 preventDefault()

但是preventDefault()阻止事件的默认行为不支持IE，所以在IE中要使用returnValue来阻止事件默认行为

（1）

<a href=”http://www.baidu.com” id=”test” onclick=”stop()”>百度</a>

function stop(event){ //IE和Chrome下是window.event 火狐下是event

event = event || window.event;

if(event.preventDefault){

event.preventDefault();

}else{

event.returnValue = false;

} //target才是点击的元素 IE和谷歌下是srcElement 火狐下是target

var target = event.target || event.srcElement;

//获取元素内部元素

alert(target.innerHTML);

};

（2）

<a href=”http://www.baidu.com” id=”test”> 百度 </a>

var test = document.getElementById(‘test’);

function stopDefault( e ) {

if ( e && e.preventDefault )

e.preventDefault();

else

window.event.returnValue = false;

}

test.onclick = function(e)

{

stopDefault(e);

}