JS基础-特效篇（三大家族）11-冒泡案例（登录蒙版）

1.效果：页面上有个登录按钮，点击登录按钮后进入页面，点击蓝色方块进入目标页面，无法滚动！

2.自己的工具库MyTool.js

var myTool = {
    $: function (id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    },
    scroll: function () {
        if (window.pageYOffset !== null) { //最新的浏览器
            return {
                //里面相当于字面量对象或JSON对象，是有区别的
                "top": window.pageYOffset,
                "left": window.pageXOffset
            }
        } else if (document.compatMode === 'CSS1Compat') {  //W3C标准
            return {
                "top": document.documentElement.scrollTop,
                "left": document.documentElement.scrollLeft
            }
        }
        return {
            "top": document.body.scrollTop,
            "left": document.body.scrollLeft
        }
    },
    show: function (ele) {
        ele.style.display = 'block';
    },
    hide: function (ele) {
        ele.style.display = 'none';
    },
    client: function () {
        if (window.innerWidth !== null) { //最新的浏览器
            return {
                //里面相当于字面量对象或JSON对象，是有区别的
                "width": window.innerWidth,
                "height": window.innerHeight
            }
        } else if (document.compatMode === 'CSS1Compat') {  //W3C标准
            return {
                "width": document.documentElement.clientWidth,
                "height": document.documentElement.clientHeight
            }
        }
        return {
            "width": document.body.scrollWidth,
            "height": document.body.scrollHeight
        }
    },
    /*阻止冒泡*/
    stopBubble: function (eve) {
        if(eve && eve.stopPropagation){
            eve.stopPropagation();
        }else{   //IE678
            eve.cancelBubble = true;
        }
    }
};

3.页面元素：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #panel{
            width: 100%;
            height: 100%;
            background-color: #000000;
            opacity: .4;

            position: absolute;
            left: 0;
            top: 0;

            display: none;
        }
        #logo{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            border-radius:5px ;

            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-150px,-150px);

            display: none;
        }
</style>

<button id="btn">登录</button>
<div id="panel"></div>
<div id="logo"></div>
<script src="MyTool/MyTool.js"></script>

4.JS函数

<script>
    window.addEventListener('load',function (ev) {
        //1.监听按钮点击
        myTool.$('btn').addEventListener('click',function (ev1) {
            myTool.stopBubble(ev1); //阻止冒泡！！！
            //1.1显示面板和蒙版
            myTool.$('panel').style.display = 'block';
            myTool.$('logo').style.display = 'block';

            //1.2隐藏滚动条
            document.body.style.overflow = 'hidden';
        });

        //2.点击文档
        document.addEventListener('click',function (ev2) {
            var e = ev2 || window.event;  //这个是兼容！

            //2.1获取点击对象
            var targetId = e.target ? e.target.id : e.srcElement.id;  //这个也是兼容！！！
            //2.2判断
            if(targetId !== 'logo'){
                myTool.$('panel').style.display = 'none';
                myTool.$('logo').style.display = 'none';

                document.body.style.overflow = 'auto';
            }else{
                window.location.href = 'https://mp.csdn.net/console/article?spm=1000.2115.3001.5448';
            }
        })
    },false)
</script>