日本阿v片在线播放免费,成人国产片视频在线观看,日韩黄片毛片在线观看,一区亚洲电影,琪琪秋霞午夜av影视在线,中文字幕在线视频不卡,最新大伊香蕉精品视频在线,亚洲AV无码日韩一区二区乱 

  
      
    

      

	
      
		
      
			
      
				
      事件冒泡和冒泡的阻止
      
				
      
					
       2020-2-22      seo達(dá)人      
      
					
					
      
						
					
      
				
      
				
			
      
			
      
				
      事件冒泡概念：當(dāng)元素觸發(fā)了事件的時(shí)候，會(huì)依次向上觸發(fā)所有元素的相同事件。

      


      
事件冒泡的行為演示

      
<!DOCTYPE html>

      
<html lang="en">

      
<head>

      
    <meta charset="UTF-8">

      
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

      
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

      
    <title>Document</title>

      
    <style>

      
     #a{

      
         background: pink;

      
         width: 400px;

      
         height: 400px;

      
     }

      
     #b{

      
         background: green;

      
         width: 300px;

      
         height: 300px;

      
     }

      
     #c{

      
         background: red;

      
         width: 200px;

      
         height: 200px;

      
     }

      
    </style>

      
</head>

      
<body>

      
    <div id="a">

      
        我是a

      
          <div id="b">

      
                我是b

      
             <div id="c">我是c</div>

      
          </div>

      
    </div>

      
    <script>

      
     var a = document.querySelector('#a')

      
     var b = document.querySelector('#b')

      
     var c = document.querySelector('#c')

      


      
     a.onclick = fn1;

      
     b.onclick = fn2;

      
     c.onclick = fn3;

      


      
     function fn1(){

      
         alert('a來(lái)了')

      
     }

      


      
     function fn2(){

      
         alert('b來(lái)了')

      
     }

      
     

      
     function fn3(){

      
         alert('c來(lái)了')

      
     }

      
    </script>

      
</body>

      
</html>

      


      
上面這段代碼一共有三個(gè)事件,三個(gè)div都分別綁定了單擊事件。在頁(yè)面中當(dāng)單擊c會(huì)連續(xù)彈出3個(gè)提示框。這就是事件冒泡引起的現(xiàn)象。事件冒 泡的過(guò)程是：c --> b --> a 。c冒泡到b冒泡到a。

      


      
冒泡的阻止

      
方法：

      
1.event.stopPropagation(); 是事件對(duì)象Event的一個(gè)方法，作用是阻止目標(biāo)元素事件冒泡到父級(jí)元素 2.event.cancelBubble = true; IE瀏覽器的方法

      


      
<!DOCTYPE html>

      
<html lang="en">

      
<head>

      
    <meta charset="UTF-8">

      
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

      
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

      
    <title>Document</title>

      
    <style>

      
     #a{

      
         background: pink;

      
         width: 400px;

      
         height: 400px;

      
     }

      
     #b{

      
         background: green;

      
         width: 300px;

      
         height: 300px;

      
     }

      


      
      #c{

      
         background: red;

      
         width: 200px;

      
         height: 200px;

      
     }

      
    </style>

      
</head>

      
<body>

      
    <div id="a">

      
        我是a

      
          <div id="b">

      
                我是b

      
             <div id="c">我是c</div>

      
          </div>

      
    </div>

      
    <script>

      
     var a = document.querySelector('#a')

      
     var b = document.querySelector('#b')

      
     var c = document.querySelector('#c')

      


      
     a.onclick = fn;

      
     b.onclick = fn;

      
     c.onclick = fn;

      


      
     function fn(event){

      
         var e = window.event || event;

      
         // 事件冒泡的阻止

      
         if(e.stopPropagation){

      
            e.stopPropagation();  // 通用寫(xiě)法

      
         }else{

      
             e.cancelBubble = true; // 阻止IE

      
         }

      
         var str = this.innerHTML;

      
         alert(str)

      
     }

      
    </script>

      
</body>

      
</html>

      

      				
      
								
			
      
		
      
		
		
	
      


      
    
  
      
    
      日歷
      
    
      
        
      
        
    
      
  
      
    
    
      
      
      鏈接
      
      
        
                
      
    
      
    
      
      
      個(gè)人資料
      
      
    
      
    
      
      
      存檔