js事件(Event)之（四）阻止默認操作

前續：本文來自於網絡文章整理，僅供參考，歡迎糾錯指正。

 默認操作 具體指的是什么呢？看如下實例：

(1)把單擊事件處理程序注冊到一個錨元素，而不是一個外層的<div>上，那么就要面對另外一個問題：當用戶單擊鏈接時，瀏覽器會加載一個新頁面。

(2)當用戶在編輯完表單后按下回車鍵時，會觸發表單的submit事件，在此事件發生后，表單提交才會真正發生。

這種行為與我們討論的事件處理程序不是同一個概念，它是單擊標簽元素的默認操作。

 

如果我們不希望執行這種默認操作，那么在事件對象上調用.stopPropagation()方法也無濟於事，因為默認操作不是在正常的事件傳播流中發生的。

在這種情況下，處理方法有：

1、w3c的方法是e.preventDefault()，IE則是使用e.returnValue = false;

preventDefault它是事件對象(Event)的一個方法，作用是取消一個目標元素的默認行為。既然是說默認行為，當然是元素必須有默認行為才能被取消，如果元素本身就沒有默認行為，調用當然就無效了。什么元素有默認行為呢？如鏈接<a>，提交按鈕<input type=”submit”>等。當Event 對象的 cancelable為false時，表示沒有默認行為，這時即使有默認行為，調用preventDefault也是不會起作用的。

<a href="http://www.cnblogs.com/yycode/" id="testA" >caibaojian.com</a>

var a = document.getElementById("testA");
a.onclick =function(e){
    if(e.preventDefault){
        e.preventDefault();//
    }else{
        window.event.returnValue = false;//IE
7　　　　　//注意：這個地方是無法用return false代替的 
8　　　　　//return false只能取消元素
    }
}

2、return false;

javascript的return false只會阻止默認行為，而是用jQuery的話則既阻止默認行為又防止對象冒泡。

//原生js，只會阻止默認行為，不會停止冒泡
var a = document.getElementById("testA");
a.onclick = function(){
    return false;//當然 也阻止了事件本身
};
//既然return false 和 e.preventDefault()都是一樣的效果，那它們有區別嗎？當然有。
//僅僅是在HTML事件屬性 和 DOM0級事件處理方法中 才能通過返回 return false 的形式組織事件宿主的默認行為。

//jQuery，既阻止默認行為又停止冒泡
$("#testA").on('click',function(){
    return false;//當然 也阻止了事件本身
});

總結使用方法

當需要停止冒泡行為時，可以使用：

function stopBubble(e) { 
    //如果提供了事件對象，則這是一個非IE瀏覽器 
    if ( e && e.stopPropagation ){ 
        e.stopPropagation(); //因此它支持W3C的stopPropagation()方法 
    }else{ 
        window.event.cancelBubble = true; //否則，我們需要使用IE的方式來取消事件冒泡 
    }
}

當需要阻止默認行為時，可以使用：

function stopDefault( e ) { 
    if ( e && e.preventDefault ){
        e.preventDefault(); //阻止默認瀏覽器動作(W3C) 
    }else {
        window.event.returnValue = false; //IE中阻止函數器默認動作的方式 
    }
    return false; 
}

事件注意點

1、event代表事件的狀態，例如觸發event對象的元素、鼠標的位置及狀態、按下的鍵等等；

2、event對象只在事件發生的過程中才有效。

firefox里的event跟IE里的不同，IE里的是全局變量，隨時可用；firefox里的要用參數引導才能用，是運行時的臨時變量。
在IE/Opera中是window.event，在Firefox中是event；而事件的對象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中兩者都可用。

　　下面兩句效果相同：

function a(e){
    var e = (e) ? e : ((window.event) ? window.event : null); 
    var e = e || window.event; // firefox下window.event為null, IE下event為null
}