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

<head>
    <meta charset="UTF-8">
    <title>How to make the button covered by the upper div still clickable</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="Button">
    <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('Click the button');
                }),                
                dom.test.on('click'.function () {
                    console.log('Click on the mask'); }}}));var init = function() { myAction.initEvent(); } (); })</script>
</body>

</html>
Copy the code