jQuery事件冒泡处理

最新推荐文章于 2024-04-22 15:31:17 发布

{[("青椒盖饭")]}

最新推荐文章于 2024-04-22 15:31:17 发布

阅读量3.8k

点赞数

分类专栏： javaweb学习笔记

本文链接：https://blog.csdn.net/qq_43386754/article/details/86491856

版权

javaweb学习笔记专栏收录该内容

77 篇文章 0 订阅

订阅专栏

在大部分的情况下,往往会针对于一个ID组件绑定事件,基本不会有问题,但在jQuery里面也会存在有事件的冒泡处理.

观察冒泡处理

<html>
<head>
	<meta charset="utf-8"/>
	<title>jQuery的事件绑定处理</title>
	<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
	<link rel="style/sheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
			var count = 0;
			//同时选择多个元素,绑定同一个事件,导致出现冒泡事件
			$("input,div,body").on("click",function(){
				var imgObj = "<div>"+(count++)+"</div>";
				$("#imgDiv").append(imgObj);
				

			});
			
		});
	</script>
</head>
<body>
	<input id="mybutton" type="button" value="点击此处出现数字"/>
	<div id="imgDiv"></div>
</body>
</html>

在这里插入图片描述

此时再点击按钮式,触发了两次事件,这是因为按钮的input元素也在body元素之中,当用户点击按钮的时候,同时也触发了body元素的事件.
如果现在明确的绑定了id或者明确组件的话,这个冒泡就不会出现了.

阻止冒泡

		$(function(){
			var count = 0;
			//同时选择多个元素,绑定同一个事件,导致出现冒泡事件
			$("input,div,body").on("click",function(){
				var imgObj = "<div>"+(count++)+"</div>";
				$("#imgDiv").append(imgObj);
				
				//阻止冒泡事件
				event.stopPropagation()
			});
			
		});

在这里插入图片描述

stopPropagation()此函数是一个专门阻止事件冒泡处理,但是大部分情况下,如果只是针对于一个组件分别绑定一个事件,这种情况也不会出现.

{[("青椒盖饭")]}

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件冒泡处理

在大部分的情况下,往往会针对于一个ID组件绑定事件,基本不会有问题,但在jQuery里面也会存在有事件的冒泡处理.观察冒泡处理&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;jQuery的事件绑定处理&lt;/title&gt; &lt;script type="text/javascri
复制链接

扫一扫