取消冒泡，判断触发源

最新推荐文章于 2022-07-22 22:00:58 发布

秋天1014童话

最新推荐文章于 2022-07-22 22:00:58 发布

阅读量309

点赞数

分类专栏： web前端 javaScript

本文链接：https://blog.csdn.net/u013217071/article/details/53672850

版权

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

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

登录框，点击空白处登录窗消失，点击登录窗处不能消失

知识点：取消冒泡，判断触发源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .mask{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.4);
            position: fixed;
            left: 0;
            top: 0;
            display: none;
        }
        .login{
            width: 200px;
            height: 200px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin: -100px 0 0 -100px;
            display: none;
        }
        .content{
            height: 2000px;
        }
    </style>    
</head>
<body>
    <!-- 登录框，点击空白处登录窗消失，点击登录窗处不能消失 -->
    <!-- 知识点：取消冒泡，判断触发源 -->
    <a href="javascript:;" id="regesiter">注册</a>
    <a href="javascript:;">登录</a>
    <div class="mask" id="mask"></div>
    <div class="login" id="login"></div>
    <div class="content"></div>
    <script type="text/javascript" src="jsutils.js"></script>
    <script>    
     var mask = $('mask');
     var login = $('login');
     var regesiter = $('regesiter');

     regesiter.onclick = function(event){
        mask.style.display="block";
        login.style.display="block";
        document.body.style.overflow = "hidden";
        //取消冒泡
        var event = event || window.event;
        if(event && event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble();
        }

     }
     document.onclick = function(event){
        var event = event || window.event;
        var targetId = event.target? event.target.id:event.srcElement.id;
        if(targetId != 'login'){
            mask.style.display="none";
            login.style.display="none";
            document.body.style.overflow = "visibility";
        }
     }

    </script>
</body>
</html>