阻止a标签默认行为的几种简单方法

写这篇文章的契机是由于公司最近一个系统项目，基于dwz框架做的。框架内部获取内容的原理是使用ajax的load（）方法来做的。所以自然会涉及到给定的元素的要先屏蔽其链接跳转，然后再使用ajax的原理进行内容加载和读取。

如下所示：

方法1:

<a href="http://www.baidu.com" id="test" onclick="stop()">  Click Me  </a>

首先需要屏蔽掉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">  Click Me  </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);
}

其实上两种方法原理一样。

方法3:

<a href="javascript:void(0)" id="test" onclick="stop()">  Click Me  </a>

直接屏蔽掉href属性里面的跳转链接，将要进行的操作写在方法里面即可。