[js+css]点击隐藏层,点击另外层不能隐藏原层-前端开发

针对“点击隐藏层,点击另外层不能隐藏原层”的需求，需要用到JavaScript和CSS的结合。下面是实现这个效果的完整攻略：

针对“[js+css]点击隐藏层,点击另外层不能隐藏原层”的需求，需要用到JavaScript和CSS的结合。下面是实现这个效果的完整攻略：

步骤 1：HTML结构

首先，需要定义两个层，一个是要隐藏的层，一个是阻止隐藏的层。例如：

<div class="hide" id="hide-layer">这是要隐藏的层</div>
<div class="mask" id="mask-layer">这是阻止隐藏的层</div>

步骤 2：CSS样式

body{
    background: gray;
}

.hide {
    position: absolute;
    top: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    max-width: 200px;
    z-index: 10;
}

.mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: transparent;
    z-index: 5;
}

考虑如何控制这些样式的，需要使用 position 和 z-index 属性。为了让两个层都在可见范围内，给它们都设置了绝对定位。隐藏层设置了 z-index:10，阻止隐藏层设置了 z-index:5。因为 z-index 较大的元素将遮盖较小的元素，阻止隐藏的层 z-index 最小，所以优先显示。

步骤 3：JavaScript事件

要实现这个效果需要用到两个事件，一个用于隐藏层，另一个用于阻止隐藏。因为我们只希望在点击隐藏层之外的地方时才隐藏它，所以需要在文档上注册一个 mousedown 事件，它可以在点击的时候被触发。在点击事件时，可以通过检查所单击的元素是否是隐藏层或不需要隐藏的元素，在判断单击位置来决定是否隐藏目标层。

var mask = document.getElementById('mask-layer'),
    hide = document.getElementById('hide-layer');

mask.addEventListener('mousedown', function (event) {
    if (hide.style.display !== "none" && event.target === mask) {
        hide.style.display = "none";
    }
});

上面的代码可以在检测到单击时将隐藏层设置为 none，因此可以阻止它的显示。

示例 1

<!DOCTYPE html>
<html>
    <head>
        <title>点击隐藏层,点击另外层不能隐藏原层</title>
        <meta charset="utf-8">
        <style>
            body{
                background: gray;
            }

            .hide {
                position: absolute;
                top: 50%;
                left: 50%;
                margin: -50px 0 0 -50px;
                background-color: #fff;
                border: 1px solid #ccc;
                max-width: 200px;
                z-index: 10;
            }

            .mask {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                background-color: transparent;
                z-index: 5;
            } 
        </style>
    </head>
    <body>
        <div class="hide" id="hide-layer">这是要隐藏的层</div>
        <div class="mask" id="mask-layer">这是阻止隐藏的层</div>
        <script>
            var mask = document.getElementById('mask-layer'),
                hide = document.getElementById('hide-layer');

            mask.addEventListener('mousedown', function (event) {
                if (hide.style.display !== "none" && event.target === mask) {
                    hide.style.display = "none";
                }
            });
        </script>
    </body>
</html>

示例 2

<!DOCTYPE html>
<html>
    <head>
        <title>点击隐藏层,点击另外层不能隐藏原层</title>
        <meta charset="utf-8">
        <style>
            body{
                background: gray;
            }

            .hide {
                position: absolute;
                top: 50%;
                left: 50%;
                margin: -50px 0 0 -50px;
                background-color: #fff;
                border: 1px solid #ccc;
                max-width: 200px;
                z-index: 10;
            }

            .mask {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                background-color: transparent;
                z-index: 5;
            } 

            .button{
                background-color: red;
                color: white;
                padding: 10px 20px;
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div class="hide" id="hide-layer">这是要隐藏的层</div>
        <div class="mask" id="mask-layer">
            <div class="button">这个按钮不会隐藏层</div>
        </div>
        <script>
            var mask = document.getElementById('mask-layer'),
                hide = document.getElementById('hide-layer');

            mask.addEventListener('mousedown', function (event) {
                if (hide.style.display !== "none" && event.target === mask) {
                    hide.style.display = "none";
                }
            });
        </script>
    </body>
</html>

以上就是这个需求的完整攻略，希望对你有帮助。

步骤 1：HTML结构

步骤 2：CSS样式

步骤 3：JavaScript事件

示例 1

示例 2

基础教程推荐