阻止冒泡小案例

点击空白处隐藏.gif

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

css部分
<style>
        body {
            height: 2000px;
        }
        #mask {
            width: 100%;
            height: 100%;
            opacity: 0.4;
            filter:alpha(opacity = 40);  /*ie  6半透明*/
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }
        #show {
            width: 300px;
            height: 300px;
            background-color: #fff;
            position: fixed;
            left:50%;
            top:50%;
            margin:-150px 0 0 -150px;
            display: none;
        }
    </style>

body部分
<a href="javascript:;" id="login">注册</a>
<a href="javascript:;" id="">登录</a>
<div id="mask"></div>
<div id="show"></div>

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"  // 显示滚动条
        }
    }