js如何实现点击空白处就可以隐藏的效果（代码）

来源：懂视网责编：小采时间：2020-11-27 19:32:24

js如何实现点击空白处就可以隐藏的效果（代码）

js如何实现点击空白处就可以隐藏的效果（代码）:本篇文章给大家带来的内容是关于js如何实现点击空白处就可以隐藏的效果（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。技术栈涉及阻止冒泡的方法和怎样判断点击的是当前对象，都是一些工作中比较常用的知识点。<!DOCTYPE

推荐度：

点击下载本文 文档为doc格式

导读js如何实现点击空白处就可以隐藏的效果（代码）:本篇文章给大家带来的内容是关于js如何实现点击空白处就可以隐藏的效果（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。技术栈涉及阻止冒泡的方法和怎样判断点击的是当前对象，都是一些工作中比较常用的知识点。<!DOCTYPE

本篇文章给大家带来的内容是关于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如何实现点击空白处就可以隐藏的效果（代码）

推荐度：

点击下载本文 文档为doc格式

标签：隐藏点击实现

热门焦点

js如何实现点击空白处就可以隐藏的效果（代码）

js如何实现点击空白处就可以隐藏的效果（代码）

js如何实现点击空白处就可以隐藏的效果（代码）

最新推荐

猜你喜欢

热门推荐