javascript中的事件冒泡

淡淡的烟草味﹌ 2022-08-07 07:56 204阅读 0赞

在html页面中，如果两个控件正好叠加，并且两个控件都绑定了临听事件的话，里面的控件在事件被触发时，会发生事件冒泡的现象。

示例如下：

<!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    </head>
    
    <body>
    	<style type="text/css">
    		#wrapper{padding:20px 0px;background:black;width:150px;text-align:center;}
    	</style>
       
       <div id="wrapper">
       		<input type="button" value="click me" id="btn" />
       </div>
       
       <script type="text/javascript">
       		var wrapper=document.getElementById("wrapper");
    		var btn=document.getElementById("btn");
    		
    		wrapper.οnclick=function(){  //结果显示1
    			alert( "1");	
    		}
    		
    		btn.οnclick=function(){    //结果会先显示2, 再显示1      事件冒泡了
    			alert("2");	
    		}
       </script>
       <br />
       
       阻止冒泡的实现:在ie通过设置event的cancelBubble属性为true,在ff下设置event的stopPropagation实现.
    </body>
    </html>

因为ie和ff对阻止冒泡的执行方法不同，所以对阻止冒泡的功能做了封装. 如下：

<!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    </head>
    
    <body>
    	<style type="text/css">
    		#wrapper{padding:20px 0px;background:black;width:150px;text-align:center;}
    	</style>
       
       <div id="wrapper">
       		<input type="button" value="click me" id="btn" />
       </div>
       
       <script type="text/javascript">
       		var wrapper=document.getElementById("wrapper");
    		var btn=document.getElementById("btn");
    		
    		//封装阻止冒泡的动作
    		function stopPropagation( e){
    			e=window.event||e;
    			if( document.all ){
    				e.cancelBubble=true;	  //在ie通过设置event的cancelBubble属性为true
    			}else{
    				e.stopPropagation();	  //在ff下设置event的stopPropagation实现
    			}
    		}
    		wrapper.οnclick=function(){  //结果显示1
    			alert( "1");	
    		}
    		
    		btn.οnclick=function(e){    //结果会先显示2, 再显示1
    			alert("2");	
    			stopPropagation( e );
    		}
       </script>
       <br />
       
       阻止冒泡的实现:在ie通过设置event的cancelBubble属性为true,在ff下设置event的stopPropagation实现.
    </body>
    </html>