1. 程式人生 > >js冒泡事件相容火狐瀏覽器

js冒泡事件相容火狐瀏覽器

<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>