Jquery 阻止事件冒泡

最新推荐文章于 2024-08-10 02:17:33 发布

原创最新推荐文章于 2024-08-10 02:17:33 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function

Jquery 专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用JQuery阻止事件冒泡，并通过示例代码展示了不同DOM元素上绑定click事件并阻止其向上冒泡的过程。

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

Jquery 阻止事件冒泡方法：

<html>

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style type="text/css">
#content{
	width:200px;
	height:100px;
	background:grey;
	}
span{
	width:200px;
	height:50px;
	background:pink;
	}		
</style>
<script type="text/javascript">
$(function(){
	$("body").bind("click",function(){				//传event值
		$("#tisi").append("<p>body块被点击</p>");
	})
	$("#content").bind("click",function(event){
		$("#tisi").append("<p>content块被点击</p>");
		event.stopPropagation();
	})
	$("span").bind("click",function(event){			//传event值
		$("#tisi").append("<p>span块被点击</p>");
		event.stopPropagation();
	})
 })
  </script>
</head>

<body>
	<div id="content">
		div 块事件<br />
		<span>span块事件</span><br />
		div 块事件<br />
	</div>
	<div id="tisi"></div>
</body>

</html>

事件结果图：