日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
 
  
  
 
  
  
  s1 
  
  
    s2 
  
  
      s3 
  
  
       
  
  
     
  
  
   
  
  

這次我們?cè)O(shè)置三個(gè) span，分別是 s1, s2, s3，然后設(shè)置 s1，s3 為冒泡執(zhí)行，s2 為捕獲執(zhí)行：

從運(yùn)行的效果來(lái)看，點(diǎn)擊 s3，依次 alert s2 => s3 => s1，說(shuō)明：

• 捕獲事件和冒泡事件同時(shí)存在的，而且捕獲事件先執(zhí)行，冒泡事件后執(zhí)行;
• 如果元素存在事件且事件的執(zhí)行時(shí)間與當(dāng)前邏輯一致(冒泡或捕獲)，則執(zhí)行。

默認(rèn)事件取消與停止冒泡

當(dāng)然，有時(shí)候我們只想執(zhí)行最內(nèi)層或最外層的事件，根據(jù)內(nèi)外層關(guān)系來(lái)把范圍更廣的事件取消掉(對(duì)于新手來(lái)說(shuō)，不取消冒泡，很容易中招的出現(xiàn) bug)。event.stopPropagation()(IE 中window.event.cancelBubble = true)可以用來(lái)取消事件冒泡。

有時(shí)候?qū)τ跒g覽器的默認(rèn)事件也需要取消，這時(shí)候用到的函數(shù)則是 event.preventDefault()(IE 中window.event.returnValue = false)。

那么默認(rèn)事件取消和停止冒泡有什么區(qū)別呢?我的理解：瀏覽器的默認(rèn)事件是指瀏覽器自己的事件(這不廢話嗎)，比如 a 標(biāo)簽 的點(diǎn)擊，表單的提交等，取消掉就不會(huì)執(zhí)行啦;冒泡則取消的是由外向里(捕獲)、由里向外(冒泡)，stop 之后，就不會(huì)繼續(xù)遍歷了。stackoverflow 上的解答

看下例子，依舊是上面那個(gè)例子，不過(guò)每個(gè)函數(shù)都加了 停止冒泡：

 
 
  
  
s1.addEventListener('click',function(e){ 
  
  
  e.stopPropagation(); 
  
  
  alert('s1'); 
  
  
},false); 
  
  
s2.addEventListener('click',function(e){ 
  
  
  e.stopPropagation(); 
  
  
  alert('s2'); 
  
  
},true); 
  
  
s3.addEventListener('click',function(e){ 
  
  
  e.stopPropagation(); 
  
  
  alert('s3'); 
  
  
},false);  
 

點(diǎn)擊的結(jié)果是：當(dāng)點(diǎn)擊 s2 或 s3 的時(shí)候，都會(huì) alert s2，點(diǎn)擊 s1，彈出 s1。因?yàn)槭录蝗∠木壒?，點(diǎn)擊 s3，執(zhí)行 s2后就不會(huì)在向下執(zhí)行了。

在看一個(gè) preventDefault 的例子。

 
 
  
  
 
  
  
  點(diǎn)我回主頁(yè)