如何阻止事件冒泡

前端吕小布

已于 2023-06-28 16:54:13 修改

阅读量1.4w

点赞数 3

分类专栏：前端面试题 JavaScript 文章标签： javascript 前端

于 2021-01-27 15:07:53 首次发布

本文链接：https://blog.csdn.net/weixin_43804496/article/details/113248288

版权

前端面试题同时被 2 个专栏收录

49 篇文章 24 订阅

订阅专栏

JavaScript

28 篇文章 0 订阅

订阅专栏

在页面开发中，我们使用JS添加事件后，默认情况事件会向上冒泡的。

<body>
	<div class="parent">
		<input type="button" class="child" value="仙剑奇侠传" >
	</div>
	<script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
	<script type="text/javascript">
		$(".child").click(function(){
			console.log('李逍遥');
		});
		$(".parent").click(function(){
			console.log('赵灵儿');
		});
	</script>
</body>

要阻止事件冒泡很简单，两个方法：1、调用event.stopPropagation()方法就行了，其中event就是事件参数；2、return false

event.stopPropagation()

<body>
	<div class="parent">
	    <input type="button" class="child" value="仙剑奇侠传" >
	</div>
	<script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
	<script type="text/javascript">
        //阻止事件冒泡，但不会阻止默认行为
		$(".child").click(function(event){
			console.log('李逍遥');
			event.stopPropagation();
		});
		$(".parent").click(function(){
			console.log('赵灵儿');
		});
	</script>
</body>

这样我们这里点击按钮后，就不会触发div的事件了，就是说事件没有冒泡到div层了。

return false

<body>
	<div class="parent">
	    <a href="https://www.baidu.com" class="child">仙剑奇侠传</a>
	</div>
	<script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
	<script type="text/javascript">
        //阻止事件冒泡，也阻止默认行为
		$(".child").click(function(event){
			console.log('李逍遥');
			return false;
		});
		$(".parent").click(function(){
			console.log('赵灵儿');
		});
	</script>
</body>

event.preventDefault()

<body>
	<div class="parent">
		<a href="https://www.baidu.com" class="child">仙剑奇侠传</a>
	</div>
	<script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
	<script type="text/javascript">
	    //不阻止事件冒泡，但阻止默认行为
		$(".child").click(function(event){
			console.log('李逍遥');
			event.preventDefault();
		});
		$(".parent").click(function(){
			console.log('赵灵儿');
		});
	</script>
</body>

总结：

1、event.stopPropagation();

事件处理过程中，阻止了事件冒泡，但不会阻止默认行为（执行超链接的跳转）

2、return false;

事件处理过程中，阻止了事件冒泡，也阻止了默认行为（不执行超链接的跳转）

3、event.preventDefault();
事件处理过程中，不阻止事件冒泡，但阻止默认行为（父元素以上全部会触发该事件，但不执行超链接跳转）

前端吕小布

关注

3
点赞
踩
42

收藏

觉得还不错? 一键收藏
打赏
0
评论
如何阻止事件冒泡

1、事件处理过程中，阻止了事件冒泡，但不会阻止默认行为（执行超链接的跳转）2、事件处理过程中，阻止了事件冒泡，也阻止了默认行为（不执行超链接的跳转）3、事件处理过程中，不阻止事件冒泡，但阻止默认行为（父元素以上全部会触发该事件，但不执行超链接跳转）
复制链接

扫一扫