如意小仙女前端学习第N+3天——事件冒泡-编程知识

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

news/2024/12/28 19:09:22/文章来源:https://www.cnblogs.com/strugkail/p/18636787

为什么要阻止冒泡？怎么解决？
很简单的一个例子，盒子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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/860500.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！