js中阻止事件冒泡

<html>
        <head>
                <title>js阻止时间冒泡</title>
        </head>
        <style>
                #bubble{width:300px;height:300px;background:red;}
                #bubble2{width:200px;height:200px;background:green;}
                #bubble3{width:100px;height:100px;background:blue;}
        </style>
        <body>
                <div id="bubble" onclick="bubble(this, event)">
                <div id="bubble2" onclick="bubble(this, event)">
                        <div id="bubble3" onclick="bubble(this, event)">this one</div>
                                this two
                        </div>
                        this three
                </div>
        <body>
</html>
<script>
    //阻止事件冒泡
    function stopEventBubble(event){
        var e=event || window.event;
        if (e && e.stopPropagation){
            e.stopPropagation();
        }
        else{
            e.cancelBubble=true;
        }
    }
    
    function bubble(obj, evt){
        alert(obj.id);
        stopEventBubble(evt);
    }
</script>

你可能感兴趣的:(js中阻止事件冒泡)