如意小仙女前端学习第N+3天——事件冒泡

为什么要阻止冒泡？怎么解决？
很简单的一个例子，盒子one中有一个盒子two，盒子two中有一个button上面绑着事件a，而这个相同事件恰巧在盒子one和two中也有，当button事件被触发时，one和two中的事件也会被触发，所以我们需要进行阻止。

  
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
 
    </head>
    <body>
        <div class="one">
        <div class="two">
            <button class="butt">Catch me</button>
        </div>
  </div>
   <script type="text/javascript" src="js/jquery2.0.min.js" ></script>
   <script type="text/javascript" src="js/Test1.js" ></script>
    </body>
</html>
<script>
$(function(){
    $('.one').on('click',function(){
        console.log('oneoneone');
    })
 
$('.two').on('click',function(){
    console.log('twotwotwo');
});
$('.butt').on('click',function(){
    console.log('buttonbuttonbutton');
});
});
 
</script>

至于阻止冒泡的方法很简单，常用的是在要实现的事件的Js代码末尾加个return false; 或者event.stopPropagation();
譬如这个例子中，button绑定的事件才是要实现的事件，所以像这样

 <script>
$(function(){
    $('.one').on('click',function(){
        console.log('oneoneone');
    })
 
$('.two').on('click',function(){
    console.log('twotwotwo');
});
$('.butt').on('click',function(){
    console.log('buttonbuttonbutton');
    return false;  //或者改成 event.stopPropagation();
});
});
</script>

posted @ 2024-12-28 19:08 枯木雕刻者阅读(7) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 2024-1-19事件冒泡

· 阻止事件冒泡的两种方式

· 阻止小程序事件冒泡的三种方法

· js基础_70、事件的冒泡

· 什么是事件冒泡，如何阻止事件冒泡

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

公告

昵称：枯木雕刻者
园龄： 3个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

2024年12月(1)

阅读排行榜

1. 如意小仙女前端学习第N+3天——事件冒泡(7)

枯木雕刻者

世界上只有一种真正的英雄主义，那就是在认清生活的真相后依然热爱生活。

如意小仙女前端学习第N+3天——事件冒泡

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>

	</head>
	<body>
	<div class="one">
	<div class="two">
	<button class="butt">Catch me</button>
	</div>
	</div>
	<script type="text/javascript" src="js/jquery2.0.min.js" ></script>
	<script type="text/javascript" src="js/Test1.js" ></script>
	</body>
	</html>
	<script>
	$(function(){
	$('.one').on('click',function(){
	console.log('oneoneone');
	})

	$('.two').on('click',function(){
	console.log('twotwotwo');
	});
	$('.butt').on('click',function(){
	console.log('buttonbuttonbutton');
	});
	});

	</script>