JavaScript 模态框 (阻止事件冒泡,event.target)

181 阅读 0 评论 120 点赞

我是靠谱客的博主感动小兔子，这篇文章主要介绍JavaScript 模态框 (阻止事件冒泡,event.target)，现在分享给大家，希望可以做个参考。

demo.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,html {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .mask {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            background: rgba(0, 0, 0, 0.6);
        }
        .login {
            width: 400px;
            height: 300px;
            cursor: pointer;
            background-color: #fff;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div class="mask">
        <div class="login" id="login"></div>
    </div>
    <a href="#">注册</a>
    <a href="#">登陆</a>
    <script>
        //需求：点击登录按钮，显示模态框。点击出去login以外的所有盒子隐藏模态框。
        //步骤：
        //1.给登录绑定事件
        //2.给document绑定事件，因为可以冒泡，只要判断，点击的不是login，那么隐藏模态框


        //1.给登录绑定事件
        var mask = document.getElementsByClassName("mask")[0];
        var a = document.getElementsByTagName("a")[1];

        a.onclick = function (event) {
            //显示模态框
            mask.style.display = "block";

            //阻止事件冒泡
            event = event || window.event;
            if(event && event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }

        }

        //2.给document绑定事件，因为可以冒泡，只要判断，点击的不是login，那么隐藏模态框
        document.onclick = function (event) {
            //获取点击按钮后传递过来的值。
            event = event || window.event;

            //获取触发事件的最子集元素     兼容写法
            //var aaa = event.target || event.srcElement;
            var aaa = event.target?event.target:event.srcElement; //获取触发事件的最子集元素   兼容写法

            console.log(event.target);

            //判断目标值的ID是否等于login，如果等于不隐藏盒子，否则隐藏盒子。
            if(aaa.id !== "login"){
                mask.style.display = "none";
            }
        }

    </script>

</body>
</html>