阻止事件冒泡、取消默认事件

最新推荐文章于 2024-05-12 21:38:39 发布

可乐6666

最新推荐文章于 2024-05-12 21:38:39 发布

阅读量447

点赞数 1

分类专栏： JavaScript HTML 文章标签： stopPropagation preventDefault 事件冒泡阻止默认事件

本文链接：https://blog.csdn.net/xuexizhe88/article/details/55256760

版权

JavaScript 同时被 2 个专栏收录

23 篇文章 2 订阅

订阅专栏

HTML

13 篇文章 2 订阅

订阅专栏

1、事件冒泡的由来！

事件发生需要有事件源，即引发这个事件的对象。

事件发生后，事件源本身没有处理事件的能力，如：我们给div添加一个点击事件，但div本身并不能处理这个事件，事件必须传播，达到能够处理本事件的代码中。就是要找到处理该div点击事件的函数。

事件冒泡：就是通过事件冒泡找到找到处理点击事件的函数。事件冒泡是根据DOM中的对象树，以此向上查找。如果父节点有执行该点击事件的函数或可执行的语句，就执行函数或语句；然后事件继续向上传播，类似查找到爷倍节点等等。

2、阻止事件冒泡事例

<body>
	<div class="one" style="width:200px;height:200px;background:green;"> 
		<div class="two" style="width:150px;height:150px;background:yellow;"> 
			<div class="three" style="width: 100px;height: 100px;background: lightblue;">
				<a href="http://www.baidu.com">点击进入百度</a>
			</div> 
		</div> 
	</div>
</body>

（1）、通过 stopPropagation()方法只阻止一个事件冒泡

$('.three').click(function(e){ 
	alert('four'); 
	//阻止起泡
	e.stopPropagation();
});

（2）、通过 preventDefault()方法取消默认行为

$('.three').click(function(e){ 
	alert('three'); 
	//阻止默认事件
	e.preventDefault();
});

（3）、通过返回 false 取消默认行为和阻止事件冒泡

$('.three').click(function(e){ 
	alert('three'); 
	//阻止默认事件和阻止冒泡
	return false;
});

3、总结；

stopPropagation()方法阻止事件冒泡；

preventDefault()方法阻止默认事件；

return false;阻止默认行为和阻止事件冒泡；

可乐6666

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
阻止事件冒泡、取消默认事件

1、事件冒泡的由来！事件发生需要有事件源，即引发这个事件的对象。事件发生后，事件源本身没有处理事件的能力，如：我们给div添加一个点击事件，但div本身并不能处理这个事件，事件必须传播，达到能够处理本事件的代码中。就是要找到处理该div点击事件的函数。事件冒泡：就是通过事件冒泡找到找到处理点击事件的函数。事件冒泡是根据DOM中的对象树，以此向上查找。如果父节点有执行该点击事件的函数或可
复制链接

扫一扫

专栏目录