日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
  
  
 
  
  
  s1 
  
  
    s2 
  
  
      s3 
  
  
       
  
  
     
  
  
   
  
  

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

從運行的效果來看，點擊 s3，依次 alert s2 => s3 => s1，說明：

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

默認事件取消與停止冒泡

當然，有時候我們只想執(zhí)行最內層或最外層的事件，根據內外層關系來把范圍更廣的事件取消掉(對于新手來說，不取消冒泡，很容易中招的出現 bug)。event.stopPropagation()(IE 中window.event.cancelBubble = true)可以用來取消事件冒泡。

有時候對于瀏覽器的默認事件也需要取消，這時候用到的函數則是 event.preventDefault()(IE 中window.event.returnValue = false)。

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

看下例子，依舊是上面那個例子，不過每個函數都加了 停止冒泡：

 
 
  
  
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);  
 

點擊的結果是：當點擊 s2 或 s3 的時候，都會 alert s2，點擊 s1，彈出 s1。因為事件被取消的緣故，點擊 s3，執(zhí)行 s2后就不會在向下執(zhí)行了。

在看一個 preventDefault 的例子。

 
 
  
  
 
  
  
  點我回主頁