#div点击穿透效果，阻止冒泡

最新推荐文章于 2024-07-23 19:42:13 发布

～二向箔～

最新推荐文章于 2024-07-23 19:42:13 发布

阅读量993

点赞数

分类专栏：好玩的css 文章标签： css html5 html css3 javascript

本文链接：https://blog.csdn.net/lin_s_c/article/details/106629572

版权

好玩的css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

多层div叠加，点击穿透到想要一层

话不多说，直接看demo
*在覆盖在目标点击的div 上面的盒子里加 “ pointer-events: none;” *

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div穿透效果</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .number {
        background-color: #610000;
        width: 300px;
        height: 300px;
    }
    .one,.two {
        position: absolute;
        width:200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
    }
    .one{      
        top:30px;
        left: 30px;
        background-color: #01a1cc;
    }
    .two{
        top:0;
        opacity: 0.5;
        pointer-events: none;
        background-color: #60b961;
    }
</style>
<body>
    <div class="number" onclick="num()">
        <div class="one" onclick="sand()">大</div>
        <div class="two" onclick="sand2()">小</div>
    </div>
</body>
<script>
function sand(){
    console.log('one')
}
function sand2(){
    console.log('two')
}
function num(){
    console.log('number')
}
</script>
</html>

运行效果图：
在这里插入图片描述

输出：
下面那层
我是父盒子

如果只想输出下面那层,只需在js里面加阻止冒泡的语句，如下

function sand(){
    console.log('下面那层')
    event.stopPropagation();
}

输出：
下面那层

～二向箔～

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录