快捷導(dǎo)航

Js 冒泡事件阻止實(shí)現(xiàn)代碼

更新時(shí)間：2013年01月27日 12:05:15 作者：

當(dāng)一個(gè)元素上的事件被觸發(fā)的時(shí)候，比如說鼠標(biāo)點(diǎn)擊了一個(gè)按鈕，同樣的事件將會在那個(gè)元素的所有祖先元素中被觸發(fā)

1. 事件目標(biāo)

現(xiàn)在，事件處理程序中的變量event保存著事件對象。而event.target屬性保存著發(fā)生事件的目標(biāo)元素。這個(gè)屬性是DOM API中規(guī)定的，但是沒有被所有瀏覽器實(shí)現(xiàn) 。jQuery對這個(gè)事件對象進(jìn)行了必要的擴(kuò)展，從而在任何瀏覽器中都能夠使用這個(gè)屬性。通過.target，可以確定DOM中首先接收到事件的元素（即實(shí)際被單擊的元素）。而且，我們知道this引用的是處理事件的DOM元素，所以可以編寫下列代碼：

復(fù)制代碼代碼如下:

$(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"> ，而不是其他后代元素?，F(xiàn)在，單擊按鈕不會再折疊樣式轉(zhuǎn)換器，而單擊邊框則會觸發(fā)折疊操作。但是，單擊標(biāo)簽同樣什么也不會發(fā)生，因?yàn)樗彩且粋€(gè)后代元素。實(shí)際上，我們可以不把檢查代碼放在這里，而是通過修改按鈕的行為來達(dá)到目標(biāo) 。

2. 停止事件傳播

事件對象還提供了一個(gè).stopPropagation()方法，該方法可以完全阻止事件冒泡。與.target類似，這個(gè)方法也是一種純JavaScript特性，但在跨瀏覽器的環(huán)境中則無法安全地使用。不過，只要我們通過jQuery來注冊所有的事件處理程序，就可以放心地使用這個(gè)方法。
下面，我們會刪除剛才添加的檢查語句event.target == this，并在按鈕的單擊處理程序中添加一些代碼：

復(fù)制代碼代碼如下:

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

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

3. 默認(rèn)操作

如果我們把單擊事件處理程序注冊到一個(gè)錨元素，而不是一個(gè)外層的<div>上，那么就要面對另外一個(gè)問題：當(dāng)用戶單擊鏈接時(shí)，瀏覽器會加載一個(gè)新頁面。這種行為與我們討論的事件處理程序不是同一個(gè)概念，它是單擊錨元素的默認(rèn)操作。類似地，當(dāng)用戶在編輯完表單后按下回車鍵時(shí)，會觸發(fā)表單的submit事件，在此事件發(fā)生后，表單提交才會真正發(fā)生。
如果我們不希望執(zhí)行這種默認(rèn)操作，那么在事件對象上調(diào)用.stopPropagation()方法也無濟(jì)于事，因?yàn)槟J(rèn)操作不是在正常的事件傳播流中發(fā)生的。在這種情況下，.preventDefault()方法則可以在觸發(fā)默認(rèn)操作之前終止事件。
提示當(dāng)在事件的環(huán)境中完成了某些驗(yàn)證之后，通常會用到.preventDefault()。例如，在表單提交期間，我們會對用戶是否填寫了必填字段進(jìn)行檢查，如果用戶沒有填寫相應(yīng)字段，那么就需要阻止默認(rèn)操作。我們將在第8章詳細(xì)討論表單驗(yàn)證。
事件傳播和默認(rèn)操作是相互獨(dú)立的兩套機(jī)制，在二者任何一方發(fā)生時(shí)，都可以終止另一方。如果想要同時(shí)停止事件傳播和默認(rèn)操作，可以在事件處理程序中返回false，這是對在事件對象上同時(shí)調(diào)用.stopPropagation()和.preventDefault()的一種簡寫方式。

補(bǔ)充：

復(fù)制代碼代碼如下:

//單擊按鈕事件（改變文字樣式）
$(document).ready(function() {
   $('#switcher .button').click(function() {
     $('body').removeClass();
     if (this.id == 'switcher-narrow') {
       $('body').addClass('narrow');
     }
     else if (this.id == 'switcher-large') {
       $('body').addClass('large');
     }

     $('#switcher .button').removeClass('selected');
     $(this).addClass('selected');
   });
});

//單擊按鈕外層div出發(fā)事件（隱藏按鈕）
$(document).ready(function() {
   $('#switcher').click(function() {
     $('#switcher .button').toggleClass('hidden');
   });
});

現(xiàn)在的問題是，當(dāng)點(diǎn)擊了按鈕時(shí)，同時(shí)觸發(fā)了隱藏按鈕事件。這是事件冒泡導(dǎo)致。
為了阻止事件冒泡，需要為隱藏按鈕函數(shù)添加一個(gè)參數(shù)：

復(fù)制代碼代碼如下:

$(document).ready(function() {
   $('#switcher').click(function(even) {
     if(even.target==this){
       $('#switcher .button').toggleClass('hidden');
     }
   });
});

even保存事件對象，even.target屬性保存發(fā)生事件的目標(biāo)元素?？梢源_定DOM中首先接收到事件的元素。此時(shí)代碼確保了被單擊的是<div id="switcher">，而不是其后代元素。

也可以這樣處理，通過修改按鈕的行為來達(dá)到目的。

復(fù)制代碼代碼如下:

$(document).ready(function() {
   $('#switcher .button').click(function(even) {
     $('body').removeClass();
     if (this.id == 'switcher-narrow') {
       $('body').addClass('narrow');
     }
     else if (this.id == 'switcher-large') {
       $('body').addClass('large');
     }

     $('#switcher .button').removeClass('selected');
     $(this).addClass('selected');
     even.stopPropagation();
   });
});

用JS阻止事件冒泡

事件冒泡: 當(dāng)一個(gè)元素上的事件被觸發(fā)的時(shí)候，比如說鼠標(biāo)點(diǎn)擊了一個(gè)按鈕，同樣的事件將會在那個(gè)元素的所有祖先元素中被觸發(fā)。這一過程被稱為事件冒泡；這個(gè)事件從原始元素開始一直冒泡到DOM樹的最上層。
可以用JS來阻止js事件冒泡。因?yàn)闉g覽器的差異IE和FF的JS寫法有點(diǎn)不一樣。
IE用cancelBubble=true來阻止而FF下需要用stopPropagation方法。
下一下完整的代碼：

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<script type="text/javascript">
function aaaclick(){
alert("td click");
}
function bbbclick(evt){
alert("td click");
if (window.event) {
event.cancelBubble = true;
}else if (evt){
evt.stopPropagation();
}
}
function trclick(){
alert("tr click");
}

function tableclick(){
alert("table click");
}
</script>

<body>
<p>點(diǎn)擊aaaa會觸發(fā)上層的onclick事件，點(diǎn)擊bbbb不會觸發(fā)上層onclick事件</p>
<table width="204" onclick="tableclick()" class="tab">
<tr >
    <td width="96"> </td>
    <td width="96"> </td>
</tr>
<tr onclick="trclick()">
    <td onclick="aaaclick()">aaaa</td>
    <td onclick="bbbclick(event)">bbbbb</td>
</tr>
<tr>
    <td> </td>
    <td> </td>
</tr>
</table>
</body>
</html>