如何使上层div遮住的按钮依然可以点击使用css实现（ pointer-events:none ）

最新推荐文章于 2024-09-25 23:39:39 发布

徐同保

最新推荐文章于 2024-09-25 23:39:39 发布

阅读量4.1k

点赞数 3

分类专栏： web前端前端技术分享文章标签：如何使上层div遮住的按钮依然可以点击

本文链接：https://blog.csdn.net/xutongbao/article/details/82871666

版权

web前端同时被 2 个专栏收录

735 篇文章 16 订阅

订阅专栏

前端技术分享

271 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>如何使上层div遮住的按钮依然可以点击</title>
    <style type="text/css">
    body{margin: 0;padding: 0;}
    .m-btn{margin: 100px;cursor: pointer;}
    .m-test{position: absolute; pointer-events:none;top:0;left: 0; width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);}
    </style>
</head>

<body>
    <input type="button" class="m-btn" id="m-btn" value="按钮">
    <div class="m-test" id="m-test"></div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script type="text/javascript">
    $(function() {
        var myAction = {};

        var dom = {
            btn: $('#m-btn'),
            test: $('#m-test')
        }

        $.extend(myAction, {
            initEvent: function() {
                dom.btn.on('click', function () {
                    console.log('点击了按钮');
                }),                
                dom.test.on('click', function () {
                    console.log('点击了蒙层');
                })
            }
        });

        var init = function() {
            myAction.initEvent();
        }();
    })
    </script>
</body>

</html>

关注博主即可阅读全文