這篇文章帶給大家的內容是關於js如何實現點擊空白處就可以隱藏的效果（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
技術堆疊涉及阻止冒泡的方法和怎樣判斷點擊的是當前對象，都是一些工作中比較常用的知識點。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height:2000px;
}
#mask {
width: 100%;
height: 100%;
opacity: 0.4; /*半透明*/
filter: alpha(opacity = 40); /*ie 6半透明*/
background-color: black;
position: fixed;
top: 0;
left: 0;
display: none;
}
#show {
width: 300px;
height: 300px;
background-color: #fff;
position: fixed;
left: 50%;
top: 50%;
margin: -150px 0 0 -150px;
display: none;
}
</style>
</head>
<body>
<a href="javascript:;" id="login">注册</a>
<a href="javascript:;">登录</a>
<p id="mask"></p>
<p id="show"></p>
</body>
</html>
<script>
function $(id) { return document.getElementById(id);}
var login = document.getElementById("login");
login.onclick = function(event) {
$("mask").style.display = "block";
$("show").style.display = "block";
document.body.style.overflow = "hidden"; // 不显示滚动条
//取消冒泡
var event = event || window.event;
if(event && event.stopPropagation)
{
event.stopPropagation();
}
else
{
event.cancelBubble = true;
}
}
document.onclick = function(event) {
var event = event || window.event;
// alert(event.target.id); // 返回的是点击的某个对象的id 名字
// alert(event.srcElement.id);
var targetId = event.target ? event.target.id : event.srcElement.id;
// 看明白这个写法
if(targetId != "show") // 不等于当前点点击的名字
{
$("mask").style.display = "none";
$("show").style.display = "none";
document.body.style.overflow = "visible"; // 显示滚动条
}
}
</script>相關推薦：
#以上是js如何實現點擊空白處就可以隱藏的效果（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
