JavaScript阻止事件冒泡

今天在自学敲代码的时候发现了一个问题，当时的例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1{
        height: 200px;
        width: 200px;
        background-color: #3b7796;
    }
    #btn{
        margin: 50px;
    }
</style>
<script>
    function fn1(){
        alert("this is div");
    }

    function fn2(){
        alert("this is btn");
    }
</script>
<body>
    <div id="div1" onclick="fn1();">
        <button id="btn" onclick="fn2();">btn</button>
    </div>
</body>
</html>

 

在我点击 btn 之后，会触发div上的点击事件，就会看到2个提醒框。

这个原因就是因为事件冒泡造成的，修改代码

    function fn2(e){

        //这里做浏览器兼容，如果提供了event 就说明他不是IE
        if(e &&  e.stopPropagation){
            e.stopPropagation();
        }else {
            //IE方式处理事件冒泡
            window.event.cancelBubble = true;
        }


        alert("this is btn");
    }


这样就阻止了事件冒泡。

 

posted @ 2016-01-05 18:51  老贝V5  阅读(378)  评论(0)  编辑  收藏  举报