大家好，欢迎来到IT知识分享网。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#test{
position: fixed;
height: calc(100vh - 20px);
width: 400px;
padding: 15px;
top:20px;
right: -400px;
background: skyblue;
transition: right .3s linear;
}
#test.show{
right: 0px;
}
#close{
display: inline-block;
padding: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn">我是一个按钮,我要显示隐藏的div</button>
<div id="test" class="">
<div class="title">
<span id="close">×</span>
</div>
<div class="content">
<input type="text">
<input type="text">
<select name="" id=""></select>
div测试内容，点击除了按钮的其它地方会隐藏此div模块。
</div>
<div class="">
<button id="save" >我是一个按钮,我要保存</button>
</div>
</div>
<script type="text/javascript">
document.querySelector(".btn").onclick = function(e){
window.event? window.event.cancelBubble = true : e.stopPropagation();//阻止冒泡，不进入document的click的回调
document.getElementById("test").classList.add("show");
};
document.querySelector("#close").onclick = function(e){
window.event? window.event.cancelBubble = true : e.stopPropagation();//阻止冒泡，不进入document的click的回调
document.getElementById("test").classList.remove("show");
};
document.querySelector("#save").onclick = function(e){
window.event? window.event.cancelBubble = true : e.stopPropagation();//阻止冒泡，不进入document的click的回调
document.getElementById("test").classList.remove("show");
};
document.onclick = function(e){
var e = e || window.event; //浏览器兼容性
var elem = e.target || e.srcElement;
console.log(elem.getAttribute('class'))
// if(elem.getAttribute('class')=="btn"){//因为按钮的点击事件已经阻止冒泡了，所以这段代码注释掉； 如果没有阻止冒泡的话，注释要放开
// return;
// }
while (elem) { //循环判断至跟节点，防止点击的是div#test子元素
if (elem.id && elem.id == 'test') {
return;
}
elem = elem.parentNode;
}
document.getElementById("test").classList.remove("show")
}
</script>
</body>免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/16174.html
