阻止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); 
         }