阻止a连接

有时咱们会遇到这种须要在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 事件中返回。 所以还会发生跳转。

重点在这里：在事件处理函数的工做机制中，当在给某元素添加事件处理函数后，一旦事件发生，相应JavaScript代码就会执行，所调用的JavaScript代码的返回值被传递给事件处理函数。当咱们给a标签添加onclick事件处理函数并点击a触发其后，若是相应JavaScript代码返回true，onclick事件处理函数就会认为这个连接被点击了，一样的若返回false即会认为连接未被点击。 因此 能够这样写：

<a href="http://www.baidu.com" onclick=" myjs(); return false;">百度 </a>  
<a href="http://www.baidu.com" onclick=" return false; ">百度</a>

方法三 阻止默认事件 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); 
         }