点击盒子外任意位置关闭当前盒子

最新推荐文章于 2024-03-27 18:22:36 发布

原创最新推荐文章于 2024-03-27 18:22:36 发布 · 725 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

冒泡专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个简单的HTML页面布局，通过JavaScript控制div元素的显示与隐藏，并使用事件处理函数阻止事件冒泡，实现点击div外部时隐藏div，点击div内部时不触发隐藏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	   div{
	   	width: 500px;
	   	height: 500px;
	   	background: #ccc;
	   	margin:100px auto;
	   	display: none;
	   }
    </style>
</head>
<body>
	<button id="btn">点击</button>
	<div id="box"></div>
</body>
</html>
<script>
    var btn=document.getElementById('btn');
    var box=document.getElementById('box');
    btn.onclick=function(e){
    	box.style.display='block';
    	window.event? window.event.cancelBubble = true : e.stopPropagation();//阻止事件向上冒泡
    }
    document.onclick=function(e){
        box.style.display='none';
    }
    box.onclick=function(e){
       window.event? window.event.cancelBubble = true : e.stopPropagation();//阻止事件向上冒泡
    }
</script>