码迷,mamicode.com
首页 > 其他好文 > 详细

阻止事件冒泡

时间:2017-05-10 23:10:12      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:div   height   function   bubble   click   window   amp   class   blog   

<!doctype html>
<html>
<head>
    <title></title>
    <meta charset = "utf-8"/>
</head>
<style type="text/css">
#grandpa{width:300px;height:300px;background:green;}
#father{width:200px;height:200px;background:gray;}
#self{width:100px;height:100px;background:pink;}
</style>

<script type="text/javascript">
function self(evt){
 alert("我被打击了") 
  if(event&&event.stopPropagation){//非IE
        event.stopPropagation();
  }else{//IE
        window.event.cancelBubble=true;
  }
 
}
function father(){
  alert("爸爸被打击了") 
}
function grandpa(){
  alert("爷爷被打击了") 
}

</script>
<body>
    <div id="grandpa" onclick="grandpa()">
        <div id="father" onclick="father()">
            <div id="self" onclick="self()">
                我是最内层的哦;
            </div>
        </div>
    </div>
    
  
</body>
</html>

 

阻止事件冒泡

标签:div   height   function   bubble   click   window   amp   class   blog   

原文地址:http://www.cnblogs.com/ahu666/p/6838663.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!