有时我们会遇到这种需要在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);
}
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/86452.html