关于实现点击父元素点击后显示子元素，但点击子元素不消失的方法（阻止事件传递）

最新推荐文章于 2024-05-06 15:16:12 发布

Z_BL

最新推荐文章于 2024-05-06 15:16:12 发布

阅读量533

点赞数 1

文章标签： javascript 前端 html css3

本文链接：https://blog.youkuaiyun.com/Z_B_L/article/details/133443020

版权

文章讲述了如何在JavaScript中，通过阻止子元素的事件冒泡来防止父元素的点击事件影响到子元素的点击行为。通过实例展示了如何使用`.on()`方法并结合`event.stopPropagation()`来实现这一目标。

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

未阻止事件传递的效果：

    <body>
		<div class="father_box">
			<p>父元素</p>
			<div class="child_box">
				<p>子元素（点我）</p>
			</div>
		</div>
		<script>
			// 父元素点击事件，点击使子元素显示/隐藏
			$(".father_box").on("click",function(){
				let show = $(".child_box").css("display")
				console.log(show);
				if(show == "none"){
					$(".child_box").css("display","block")
				}else{
					$(".child_box").css("display","none")
				}
			})
			// 子元素点击事件，点击后输出内容
			$(".child_box").on("click",function(){
				console.log("您点击了子元素");
			})
		</script>
	</body>