login 阻止冒泡事件

最新推荐文章于 2024-07-24 10:05:23 发布

action-XD

最新推荐文章于 2024-07-24 10:05:23 发布

阅读量292

点赞数 1

分类专栏：小工程 JS 文章标签： css dom html javascript web前端

本文链接：https://blog.csdn.net/action_xing/article/details/52815657

版权

小工程同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding: 0; margin: 0}
        #back{
            position: fixed;
            top:0;
            width: 100%;
            height: 100%;
            background: #333;
            opacity: 0.5;
            display: none;
        }
        #show{
            position:relative;
            margin: 100px auto;
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            background: #fff;
            display: none;
        }
    </style>
</head>
<body>
<a href="#">登录</a>
<a href="#">注册</a>
<div id="back"></div>
<div id="show"></div>
<script>
    var login = document.getElementsByTagName("a")[1];
    var back = document.getElementById("back");
    var show = document.getElementById("show");
    login.onclick = function(event){
       event.preventDefault();  //阻止元素的默认行为
    back.style.display = "block";
    show.style.display = "block";
    event.stopPropagation();  //阻止冒泡事件
    }
    document.onclick = function(event){
       var target = event.target.id;
        //alert(target)
      if(target!="show"){
          back.style.display = "none";
          show.style.display = "none";
      }
    }
</script>
</body>
</html>

action-XD

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
login 阻止冒泡事件

Title *{padding: 0; margin: 0} #back{ position: fixed; top:0; width: 100%; height: 100%; background: #333;
复制链接

扫一扫

专栏目录