阻止冒泡小案例

点击空白处隐藏.gif

本文提到有关于阻止事件冒泡的一个小案例

css部分

body部分
注册
登录

javascript部分
function $(id) {return document.getElementById(id);}
    var login = document.getElementById("login");

    login.onclick = function(event) {

        $("mask").style.display = "block";
        $("show").style.display = "block";
        document.body.style.overflow = "hidden"; // 不显示滚动条
        // 取消冒泡
        var event = event || window.event;
        if(event && event.stopPropagation)
        {
            event.stopPropagation();
        }
        else
        {
            event.cancelBubble
        }
    }
    document.onclick = function(event) {

        var event = event || window.event;
        //alert(event.target.id); // 返回某个对象的id名
        //alert(event.srcElement.id);
        var targetId = event.target ? event.target.id : event.srcElement.id;
        // 看明白这个写法
        if(targetId != "show")
        {
            $("mask").style.display = "none";
            $("show").style.display = "none";
            document.body.style.overflow = "visible"  // 显示滚动条
        }
    }