JQuery中的事件冒泡和阻止事件的传播行为

最新推荐文章于 2021-11-28 18:51:02 发布

aitangyong

最新推荐文章于 2021-11-28 18:51:02 发布

阅读量1.6w

点赞数

分类专栏： jquery 文章标签： jquery事件冒泡阻止事件传播行为 stopPropagation

本文链接：https://blog.csdn.net/aitangyong/article/details/43269793

版权

jquery 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

之前的这篇博客详细地介绍了javascript中的事件冒泡和事件捕获，以及DOM事件流。现在我们来看下，JQuery框架中的事件冒泡问题，以及如何阻止事件的传播行为。

1、JQuery中的事件绑定，都是属于事件冒泡。

这篇博客介绍了JQuery中绑定事件处理函数的几种方式，从中可以看到：这几种绑定方式，都不允许我们传递事件类型（是事件冒泡，还是事件捕获）。而javascript原生提供的addEventListener()则允许我们设置事件的类型。

<script>
	
	$(function(){
	
		$("#outA").click(function(){
			alert("A");
		});
		
		$("#outB").click(function(){
			alert("B");
		});
		
		$("#outC").click(function(){
			alert("C");
		});	
	});
	
</script>

<body>
	<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
		<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
			<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div> 
		</div>
	</div>
</body>

点击outC的时候，依次打印出C-->B-->A，很明显这是属于事件冒泡。

2、阻止事件传播的2种方式。

方式1：使用event对象的stopPropagation()函数，这种做法与javascript中一致。

$("#outC").click(function(event){
	event.stopPropagation();
});

方式2：事件处理函数的返回值false，javascript中的addEventListener没有这个功能。

$("#outC").click(function(event){
	return false;
});

aitangyong

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
JQuery中的事件冒泡和阻止事件的传播行为

之前的这篇博客详细地介绍了javascript中的事件冒泡和事件捕获，以及DOM事件流。现在我们来看下，JQuery框架中的事件冒泡问题，以及如何阻止事件的传播行为。 1、JQuery中的事件绑定，都是属于事件冒泡。这篇博客介绍了JQuery中绑定事件处理函数的几种方式，从中可以看到：这几种绑定方式，都不允许我们传递事件类型（是事件冒泡，还是事件捕获）。而javascript原生提供的
复制链接

扫一扫