写这篇文章的契机是由于公司最近一个系统项目,基于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属性里面的跳转链接,将要进行的操作写在方法里面即可。