js冒泡事件兼容火狐浏览器

脑瓜不疼

于 2018-11-13 13:46:35 发布

阅读量341

点赞数

CC 4.0 BY-SA版权

分类专栏：大前端文章标签： js

本文链接：https://blog.youkuaiyun.com/super__code/article/details/84027548

大前端专栏收录该内容

88 篇文章

订阅专栏

<body>
    <div id="out">
        <div id="middle">
            <div id="inner"></div>
        </div>
    </div>
</body>
<script>
    $("#out").on('click',function(){
        alert("点了外面的");
    });
    $("#middle").on('click',function(ev){
        cancelBubble(ev);
        alert("点了中间的");
    });
    $("#inner").on('click',function(ev){
        cancelBubble(ev);
        alert("点了里面的");
    });
    //阻止冒泡到下一个事件
    function cancelBubble(ev){
        var ev = getEvent();
        if (window.event) {
            ev.cancelBubble = true;
        }else if(ev.preventDefault){
            ev.stopPropagation();//阻止冒泡
        }
    }
    //兼容火狐 获取event方法
    function getEvent(){
        if(window.event){return window.event;}
        var func = getEvent.caller;
        while(func != null){
            var arg0 = func.arguments[0];
            if(arg0){
                if((arg0.constructor == Event || arg0.constructor == MouseEvent
                        || arg0.constructor == KeyboardEvent)
                    || (typeof(arg0) == "object" && arg0.preventDefault
                        && arg0.stopPropagation)){
                    return arg0;
                }
            }
            func = func.caller;
        }
        return null;
    }
</script>