<!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>
login 阻止冒泡事件
最新推荐文章于 2024-09-24 11:41:48 发布