需要在a标签上添加click事件,并且跳转前处理一些事务,因此需要做一些处理
防止a标签跳转的方法有:
方法一
- <a href="javascript:void(0)">百度</a>
void是一个操作符,void(0)返回undefined,地址不发生跳转
- <a href="javascript:;">百度</a>
和上面相同,返回undefined
方法二
<a href="http://baidu.com" onclick="show()">baidu</a>
<script>
function show(){
alert("我没跳转");
return false;
}
</script>
上述代码执行之后,还是会跳转,当点击a标签之后,执行的代码相当于是这样的:
obj.onclick=function(){
show();
}
show()方法没有返回值,是undefined.因此还是会跳转。
重点在这里:在事件处理函数的工作机制中,当在给某元素添加事件处理函数后,一旦事件发生,相应JavaScript代码就会执行,所调用的JavaScript代码的返回值被传递给事件处理函数。当我们给a标签添加onclick事件处理函数并点击a触发其后,如果相应JavaScript代码返回true,onclick事件处理函数就会认为这个链接被点击了,同样的若返回false即会认为链接未被点击。
所以 可以这样写:
<a href="http://www.baidu.com" onclick=" myjs(); return false;">baidu </a>
<a href="http://www.baidu.com" onclick=" return false; ">baidu</a>