一.?事件目標

現在，事件處理程序中的變量event保存著事件對象。而 event.target 屬性保存著產生事件的目標元素。這個屬性是 DOM?API 中規定的，但是沒有被所有瀏覽器實現?。jQuery對這個事件對象進行了必要的擴大，從而在任何瀏覽器中都能夠使用這個屬性。通過.target，可以肯定DOM中首先接收到事件的元素(即實際被單擊的元素)。而且，我們知道this援用的是處理事件的DOM元素，所以可以編寫以下代碼：

$(document).ready(function(){

$('#switcher').click(function(event){

$('#switcher?.button').toggleClass('hidden');

})

})

$(document).ready(function(){

$('#switcher').click(function(event){

if(event.target==this){

$('#switcher?.button').toggleClass('hidden');

}

})

})

此時的代碼確保了被單擊的元素是

，而不是其他后代元素?，F在，單擊按鈕不會再折疊樣式轉換器，而單擊邊框則會觸發折疊操作。但是，單擊標簽一樣甚么也不會產生，由于它也是一個后代元素。實際上，我們可以不把檢查代碼放在這里，而是通過修改按鈕的行動來到達目標?。

二.?停止事件傳播

事件對象還提供了一個 .stopPropagation() 方法，該方法可以完全禁止事件冒泡。與 .target 類似，這個方法也是一種純 JavaScript 特性，但在跨瀏覽器的環境中則沒法安全地使用?。不過，只要我們通過jQuery來注冊所有的事件處理程序，就能夠放心腸使用這個方法。

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

$(document).ready(function(){

$('#switcher?.button').click(funtion(event){

//……

event.stopPropagation();

})

})

同之前一樣，需要為用作單擊處理程序的函數添加一個參數，以便訪問事件對象。然后，通過簡單地調用 event.stopPropagation() 就能夠避免其他所有 DOM 元素響應這個事件。這樣一來，單擊按鈕的事件會被按鈕處理，而且只會被按鈕處理。單擊樣式轉換器的其他地方則可以折疊和擴大全部區域。

三.?默許操作

如果我們把單擊事件處理程序注冊到一個錨元素，而不是一個外層的

上，那末就要面對另外一個問題：當用戶單擊鏈接時，瀏覽器會加載一個新頁面。這類行動與我們討論的事件處理程序不是同一個概念，它是單擊錨元素的默許操作。類似地，當用戶在編輯完表單后按下回車鍵時，會觸發表單的 submit 事件，在此事件產生后，表單提交才會真正產生。

如果我們不希望履行這類默許操作，那末在事件對象上調用 .stopPropagation() 方法也杯水車薪，由于默許操作不是在正常的事件傳播流中產生的。在這類情況下，.preventDefault() 方法則可以在觸發默許操作之前終止事件?。

提示?當在事件的環境中完成了某些驗證以后，通常會用到 .preventDefault()。例如，在表單提交期間，我們會對用戶是不是填寫了必填字段進行檢查，如果用戶沒有填寫相應字段，那末就需要禁止默許操作。我們將在第8章詳細討論表單驗證。

事件傳播和默許操作是相互獨立的兩套機制，在兩者任何一方產生時，都可以終止另外一方。如果想要同時停止事件傳播和默許操作，可以在事件處理程序中返回 false，這是對在事件對象上同時調用 .stopPropagation() 和 .preventDefault() 的一種簡寫方式。

總結

以上是生活随笔為你收集整理的html 冒泡事件拦截,Js 冒泡事件阻止的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。