Js 冒泡事件阻止

現(xiàn)在，事件處理程序中的變量event保存著事件對(duì)象。而event.target屬性保存著產(chǎn)生事件的目標(biāo)元素。這個(gè)屬性是DOM API中規(guī)定的，但是沒有被所有閱讀器實(shí)現(xiàn) 。jQuery對(duì)這個(gè)事件對(duì)象進(jìn)行了必要的擴(kuò)大，從而在任何閱讀器中都能夠使用這個(gè)屬性。通過.target，可以肯定DOM中首先接收到事件的元素（即實(shí)際被單擊的元素）。而且，我們知道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');
  }
  })
 })
此時(shí)的代碼確保了被單擊的元素是<div id="switcher"> ，而不是其他后代元素。現(xiàn)在，單擊按鈕不會(huì)再折疊樣式轉(zhuǎn)換器，而單擊邊框則會(huì)觸發(fā)折疊操作。但是，單擊標(biāo)簽一樣甚么也不會(huì)產(chǎn)生，由于它也是1個(gè)后代元素。實(shí)際上，我們可以不把檢查代碼放在這里，而是通過修改按鈕的行動(dòng)來到達(dá)目標(biāo) 。

2. 停止事件傳播

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

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

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

  同之前1樣，需要為用作單擊處理程序的函數(shù)添加1個(gè)參數(shù)，以便訪問事件對(duì)象。然后，通過簡單地調(diào)用event.stopPropagation()就能夠避免其他所有DOM元素響應(yīng)這個(gè)事件。這樣1來，單擊按鈕的事件會(huì)被按鈕處理，而且只會(huì)被按鈕處理。單擊樣式轉(zhuǎn)換器的其他地方則可以折疊和擴(kuò)大全部區(qū)域。

3. 默許操作

如果我們把單擊事件處理程序注冊到1個(gè)錨元素，而不是1個(gè)外層的<div>上，那末就要面對(duì)另外1個(gè)問題：當(dāng)用戶單擊鏈接時(shí)，閱讀器會(huì)加載1個(gè)新頁面。這類行動(dòng)與我們討論的事件處理程序不是同1個(gè)概念，它是單擊錨元素的默許操作。類似地，當(dāng)用戶在編輯完表單后按下回車鍵時(shí)，會(huì)觸發(fā)表單的submit事件，在此事件產(chǎn)生后，表單提交才會(huì)真正產(chǎn)生。

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

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

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

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)