js阻止冒泡事件及默認操做

1. 事件目標

如今，事件處理程序中的變量event保存着事件對象。而event.target屬性保存着發生事件的目標元素。這個屬性是DOM API中規定的，可是沒有被全部瀏覽器實現 。jQuery對這個事件對象進行了必要的擴展，從而在任何瀏覽器中都可以使用這個屬性。經過.target，能夠肯定DOM中首先接收到事件的元素（即實際被單擊的元素）。並且，咱們知道this引用的是處理事件的DOM元素，因此能夠編寫下列代碼：

// 修改前
$('#switcher').click(function(event){
    $('#switcher .button').toggleClass('hidden');
})

// 修改後
$('#switcher').click(function(event){
    if(event.target==this){
        $('#switcher .button').toggleClass('hidden');
    }
})

此時的代碼確保了被單擊的元素是<div id="switcher"> ，而不是其餘後代元素。

2. 中止事件傳播

事件對象還提供了一個.stopPropagation()方法，該方法能夠徹底阻止事件冒泡。與.target相似，這個方法也是一種純JavaScript特性，但在跨瀏覽器的環境中則沒法安全地使用 。不過，只要咱們經過jQuery來註冊全部的事件處理程序，就能夠放心地使用這個方法。

下面，咱們會刪除剛纔添加的檢查語句event.target == this，並在按鈕的單擊處理程序中添加一些代碼：

$('#switcher .button').click(funtion(event){
    // ...
    event.stopPropagation();
})

同之前同樣，須要爲用做單擊處理程序的函數添加一個參數，以便訪問事件對象。而後，經過簡單地調用event.stopPropagation()就能夠避免其餘全部DOM元素響應這個事件。

3. 默認操做

若是咱們把單擊事件處理程序註冊到一個錨元素，而不是一個外層的<div>上，那麼就要面對另一個問題：當用戶單擊連接時，瀏覽器會加載一個新頁面。這種行爲與咱們討論的事件處理程序不是同一個概念，它是單擊錨元素的默認操做。相似地，當用戶在編輯完表單後按下回車鍵時，會觸發表單的submit事件，在此事件發生後，表單提交纔會真正發生。

若是咱們不但願執行這種默認操做，那麼在事件對象上調用.stopPropagation()方法也無濟於事，由於默認操做不是在正常的事件傳播流中發生的。在這種狀況下，.preventDefault()方法則能夠在觸發默認操做以前終止事件 。

提示 當在事件的環境中完成了某些驗證以後，一般會用到.preventDefault()。例如，在表單提交期間，咱們會對用戶是否填寫了必填字段進行檢查，若是用戶沒有填寫相應字段，那麼就須要阻止默認操做。

若是想要同時中止事件傳播和默認操做，能夠在事件處理程序中返回false，這是對在事件對象上同時調用.stopPropagation()和.preventDefault()的一種簡寫方式。