javascript中的事件冒泡

来源：互联网发布：ikbc c87换mac键位编辑：程序博客网时间：2024/06/15 00:26

在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.onclick=function(){  //结果显示1alert( "1");}btn.onclick=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.onclick=function(){  //结果显示1alert( "1");}btn.onclick=function(e){    //结果会先显示2, 再显示1alert("2");stopPropagation( e );}   </script>   <br />      阻止冒泡的实现:在ie通过设置event的cancelBubble属性为true,在ff下设置event的stopPropagation实现.</body></html>

0 0