Js 冒泡事件阻止
2. 停止事件傳播
事件物件還提供了一個.stopPropagation()方法,該方法可以完全阻止事件冒泡。與.target類似,這個方法也是一種純JavaScript特性,但在跨瀏覽器的環境中則無法安全地使用 。不過,只要我們通過jQuery來註冊所有的事件處理程式,就可以放心地使用這個方法。
下面,我們會刪除剛才新增的檢查語句event.target == this,並在按鈕的單擊處理程式中新增一些程式碼:
$(document).ready(function(){
$('#switcher .button').click(funtion(event){
//……
event.stopPropagation();
})
})
同以前一樣,需要為用作單擊處理程式的函式新增一個引數,以便訪問事件物件。然後,通過簡單地呼叫event.stopPropagation()就可以避免其他所有DOM元素響應這個事件。這樣一來,單擊按鈕的事件會被按鈕處理,而且只會被按鈕處理。單擊樣式轉換器的其他地方則可以摺疊和擴充套件整個區域。
3. 預設操作
如果我們把單擊事件處理程式註冊到一個錨元素,而不是一個外層的
如果我們不希望執行這種預設操作,那麼在事件物件上呼叫.stopPropagation()方法也無濟於事,因為預設操作不是在正常的事件傳播流中發生的。在這種情況下,.preventDefault()方法則可以在觸發預設操作之前終止事件 。
提示 當在事件的環境中完成了某些驗證之後,通常會用到.preventDefault()。例如,在表單提交期間,我們會對使用者是否填寫了必填欄位進行檢查,如果使用者沒有填寫相應欄位,那麼就需要阻止預設操作。我們將在第
事件傳播和預設操作是相互獨立的兩套機制,在二者任何一方發生時,都可以終止另一方。如果想要同時停止事件傳播和預設操作,可以在事件處理程式中返回false,這是對在事件物件上同時呼叫.stopPropagation()和.preventDefault()的一種簡寫方式。