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

取消事件冒泡

时间:2017-07-02 10:18:31      阅读:305      评论:0      收藏:0      [点我收藏+]

标签:4.0   cancel   charset   on()   rip   div   text   html4   border   

下例中:如果不取消事件冒泡,点击小div后会同时提示这是小div,这是大div。取消事件冒泡后,只会提示这是小div

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <title>New Web Project</title>
        <script type="text/javascript" src="js/jQuery1.11.1.js"></script>
        <style type="text/css">
        #mybigdiv {
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        #myid {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
        
        <script type="text/javascript">
                  //取消事件冒泡
                  //第一道能力检测:分浏览器
                $(function(){
                    //给大div注册事件
                    $("#mybigdiv").click(function(){
                        alert(我是大div);
                    });
                    
                    //小div
                    $("#myid").click(function(event){
                        alert(我是小div);
                        //UI工程师  能力检测
                        //判定浏览器引擎是IE还是其他浏览器(第一道         能力检测)
                         event=event||window.event;
                       //第二道能力检测     
                       if(event.stopPropagation){//非IE浏览器
                           event.stopPropagation();
                       }else{
                           //IE浏览器
                            event.cancelBubble=true;
                       }
                    });
                });
                
        </script>
    </head>
    <body>
       <div id="mybigdiv">我是大div
          <div id="myid">我是小div</div>
       </div>
    </body>
</html>

 

取消事件冒泡

标签:4.0   cancel   charset   on()   rip   div   text   html4   border   

原文地址:http://www.cnblogs.com/alexanderthegreat/p/7105028.html

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