阻止事件传播

时间：2023-4-16 00:27 作者：小诸葛 分类： JavaScript 正在检查是否收录...
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            button {
                border: 0;
                width: 350px;
                height: 80px;
                position: fixed;
                font-size: 16px;
                font-weight: bold;
                color: rebeccapurple;
                color: #fff;
                background-color: saddlebrown;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            button:hover {
                background-color: cadetblue;
                color: #fff;
            }

            .mc {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                background-color: #00000054;
                        z-index: 9;
                        display: none;

            }

            .lodo {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                height: 300px;
                width: 500px;
                background-color: #fff;
                        z-index: 99;
            }
            h1{
                text-align: center;
                padding: 10px;
                border-bottom: 1px dashed #000;
            }
            input{
                border: 0;
                padding:0 20px;
                background-color: steelblue;
                width: 80%;
                height: 50px;
                outline:none;
                color: #fff;
            }
            input::placeholder{
                color: #fff;
            }
            p{
                padding: 0 10px;
                font-weight: bold;

            }
        </style>
    </head>
    <body>
        <button>点击登录</button>
        <div class="mc">
            <div class="lodo">
                <h1>登录</h1>
                <p>账号：<input type="text" name="" id="" placeholder="请输入账号"></p>
                <p>密码：<input type="text" name="" id="" placeholder="请输入密码"></p>
            </div>
        </div>
        <script>
            let button =document.querySelector("button")
            let mc = document.querySelector(".mc")
            let lodo = document.querySelector(".lodo")
            button.addEventListener("click",function(){
                mc.style.display="block"
            })

            mc.addEventListener("click",function(){
                mc.style.display="none"
            })
             lodo.addEventListener("click",function(e){
                e.stopPropagation()
            })
        </script>
    </body>
</html>
阻止事件传播
扫描二维码，在手机上阅读