js 事件监听 冒泡事件

js 事件监听  冒泡事件   的取消    

【自己写框架时，才有可能用到】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>事件编程</title>
        <style type='text/css'>

        #div1 {
            width:400px;
            height:400px;
            background:#ff0000;
        }
        #div2 {
            width:300px;
            height:300px;
            background:blue;
        }
        #div3 {
            width:200px;
            height:200px;
            background:yellow;
        }
        </style>

        <script>
                             //取消事件冒泡           //自己写框架时，才有可能用到
            function stopBubble(event) {
                 if(window.event) {
                     window.event.cancelBubble = true;
                    } else {
                      event.stopPropagation();
                    }
            }
            window.onload = function() {
                addEvent($('div1'),'click',function(){
                    alert('div1');
                })
                addEvent($('div2'),'click',function(event){
                    alert('div2');
                    stopBubble(event);
                })
                addEvent($('div3'),'click',function(event){
                    alert('div3');
                    stopBubble(event);
                })
            }
        </script>
    </head>
    <body>
        <div id='div1'>
            <div id='div2'>
                <div id='div3'></div>
            </div>
        </div>
    </body>
</html>

 

posted @ 2016-01-28 15:04  gyz418  阅读(450)  评论(1)    收藏  举报