实现点击弹框内容，弹框不会隐藏

2018-01-23

前言

对于弹框，正常情况是：点击box区域，遮挡层和box元素都会隐藏。而需求是：点击弹框内容，弹框不会隐藏，而点击弹框以外的任何地方弹框隐藏，这里具体说明实现方法。

核心代码

while (elem) { 
    if (elem.id && elem.id == 'box') {
        return;
    }
    elem = elem.parentNode;
}

实现思路

（1）该while循环的循环条件是：当elem元素存在时，执行循环，否则跳出循环。

（2）判断elem是不是box。如果是，终止这个点击事件的回调函数，所以就不会执行$('#box').css('display', 'none'); $(".popup").removeClass("popup-show");这两句代码。如何不是，执行elem =elem.parentNode; 。

（3）那么elem =elem.parentNode; 这行代码的意义在哪里？这么说吧，如果没有这行代码的话，这个while循环将是一个死循环，永远跳不出这个循环。

打印一下elem发生了什么变化~

while (elem) { 
   if (elem.id && elem.id == 'box') {
       return;
   }
console.log(elem);  //178行
   elem = elem.parentNode;
console.log(elem);	//180行
}

当点击box以外的区域时，打印结果为：

分析一下：

发现经过了四个循环：

第一个循环：当elem为expense-popup 元素时，经过赋值后，elem为body元素；

第二个循环：当elem为body元素时，经过赋值后，elem为html元素；

第三个循环：当elem为html元素时，经过赋值后，elem为document元素；

第四个循环：当elem为document元素时，因为没有比document层级还要高的元素了，因此elem为null。

最后，elem为null，不符合while循环条件，因此跳出循环。

完整案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/common.css">
    <script src="js/jquery-2.2.3.min.js"></script>
    <style>
        .btn{
            width: 100px;
            height: 40px;
            border: 1px solid #000000;
            font-size: 24px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }
        .popup{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            display: none;
            background-color: rgba(0, 0, 0, .1);
            z-index: 9;
        }
        .popup-show{
            display: block;
        }
        .box{
            position: absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
            width: 200px;
            height: 100px;
            background: #ffffff;
        }
        .content{
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="btn">按钮</div>
    <div class="popup">
        <div class="box" id="box">
            <div class="content">content</div>
        </div>
    </div>
    <script>
        $(function () {
            $(document).bind('click', function(e) {
                var elem = e.target || e.srcElement;
                while (elem) { 
                    if (elem.id && elem.id == 'box') {
                        return;
                    }
                    elem = elem.parentNode;
                }
                $('#box').css('display', 'none'); //点击的不是div或其子元素
                $(".popup").removeClass("popup-show");
            });
            $(".btn").on("click",function () {
                $('#box').css('display','block');
                $(".popup").addClass("popup-show");
                return false;
            })
            $(".content").on("click",function () {
                $(this).css({
                    color: "red"
                })
            })
        })
    </script>
</body>
</html>