<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#box{
width: 100px;
height: 100px;
background: #ccc;
display: none;
}
</style>
<body>
<div id="box">
demo
</div>
<button id="btn">展示</button>
</body>
<script>
var btn=document.getElementById('btn');
var box=document.getElementById('box');
btn.onclick=function (e) {
box.style.display='block';
e.stopPropagation();
}
box.onclick=function (e) {
e.stopPropagation();
}
document.onclick=function () {
box.style.display='none';
}
</script>
</html>
重点是明白点击事件是冒泡的，从里向外依次扩散。所以只需要在点击里层元素，比如button和box元素本身的时候要用stopPropagation阻止事件继续向外扩散。而在点击document的时候，它已经不会继续向外扩散，因为document本身就是最外层了。
其实就是个事件冒泡的考察。当然对应的还是事件捕获和冒泡正好相反。
扫一扫
5864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
