亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2013年01月27日 12:05:15   作者:  
當(dāng)一個(gè)元素上的事件被觸發(fā)的時(shí)候,比如說(shuō)鼠標(biāo)點(diǎn)擊了一個(gè)按鈕,同樣的事件將會(huì)在那個(gè)元素的所有祖先元素中被觸發(fā)

1. 事件目標(biāo)

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

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

2. 停止事件傳播

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

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

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

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

3. 默認(rèn)操作

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

補(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)在的問(wè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保存事件對(duì)象,even.target屬性保存發(fā)生事件的目標(biāo)元素??梢源_定DOM中首先接收到事件的元素。此時(shí)代碼確保了被單擊的是<div id="switcher">,而不是其后代元素。

也可以這樣處理,通過(guò)修改按鈕的行為來(lái)達(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í)候,比如說(shuō)鼠標(biāo)點(diǎn)擊了一個(gè)按鈕,同樣的事件將會(huì)在那個(gè)元素的所有祖先元素中被觸發(fā)。這一過(guò)程被稱(chēng)為事件冒泡;這個(gè)事件從原始元素開(kāi)始一直冒泡到DOM樹(shù)的最上層。
可以用JS來(lái)阻止js事件冒泡。因?yàn)闉g覽器的差異IE和FF的JS寫(xiě)法有點(diǎn)不一樣。
IE用cancelBubble=true來(lái)阻止而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>無(wú)標(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>

<style type="text/css">
<!--
.tab {
 border: 1px solid #0066FF;
 cellpadding:0px;
 cellspacing:0px;
}
.tab td{
 border: 1px solid #0066FF;
}
-->
</style>
</head>

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

相關(guān)文章

最新評(píng)論