冒泡事件是点击一个子节点，会向上触发父节点和祖先节点的点击事件。

在正常的开发过程中，我们肯定会遇到用div包装div的情况(这个div可以是一个元素)。然而，事件被添加到两个div中。如果我们点击里面的div，我们希望处理这个div的事件。然而，我们不希望执行外部div的事件，所以我们需要防止冒泡。

说白了，你在家看电视，躲在自己的小房间里，却不希望声音传到隔壁父母的耳朵里。这时候你可能躲在床上，或者墙壁的隔音效果很好，所以阻隔声音可以理解为防止冒泡。

样式#内容{ width: 140pxborder: 1px纯蓝；} # msg { width: 100px高度： 100像素；margin: 20pxborder: 1px纯红；}/stylebody div id='content '外部div div id='msg '内部div /div /div/body显示结果

对应的jQuery代码如下：

脚本类型=' text/JavaScript ' src=' http : js/jquery-1 . 8 . 3 . js '/script script类型=' text/JavaScript ' $(function(){//bind click event $(' # msg ')。单击(function(){ alert(')})；//绑定click事件$ ('# content ')。单击外部div元素的(function () {alert('我是大div ')；});//绑定点击事件$(“body”)。点击body元素的(function () {alert('我是body ')；});});/script当点击一个小div时，会触发一个大div和一个body的点击事件。点击一个大的div会触发body的点击事件。

如何防止这种冒泡事件发生？

修改如下：

event . stopperpagation()；//防止事件冒泡

有时，单击“提交”按钮时会出现一些默认事件。例如，跳转到另一个界面。但是如果它没有通过验证，你就不应该跳。此时，可以设置event . preventdefault()；//阻止默认行为(表单提交)。

Html部分

正文表单操作='test.html '用户名：输入类型=' text ' id=' username '/br/输入类型=' submit '值=' sub ' id=' sub '/表单/正文

脚本类型=' text/JavaScript ' src=' http : js/jquery-1 . 8 . 3 . js '/script script类型=' text/JavaScript ' $(function(){ $(' # sub ')。click(function(event){//获取元素val()的值。var username=$('#username ')。val()；//判断值是否为空如果(username==''){ //提示//alert('文本框的值不能为空')；$ ('# msg ')。html ('ptext框值不能为空。/p ')；//防止默认行为(表单提交)事件. preventdefault()；} });});/script//防止默认行为(表单提交)事件. preventdefault()；防止默认行为的另一种方法是返回false。同样的效果。

代码如下：

脚本类型=' text/JavaScript ' src=' http : js/jquery-1 . 8 . 3 . js '/script script类型=' text/JavaScript ' $(function(){ $(' # sub ')。click(function(event){//获取元素val()的值。var username=$('#username ')。val()；//判断值是否为空如果(username==''){ //提示//alert('文本框的值不能为空')；$ ('# msg ')。html ('ptext框值不能为空。/p ')；//防止默认行为(表单提交)//event . preventdefault()；返回false} });});/script同样，上面的冒泡事件也可以通过return false来处理。

脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。8 .3 .js /脚本脚本类型=' text/JavaScript ' $(function(){//为内层差异绑定点击事件$('#msg ').点击(函数（事件){ alert('我是小div’)；//事件。stopperpagation()；//阻止事件冒泡返回false })；//为外层差异元素绑定点击事件$('#content ').点击(函数（事件){ alert('我是大div’)；//事件。stopperpagation()；//阻止事件冒泡返回false })；//为身体元素绑定点击事件$(“正文”).点击(函数（事件){ alert('我是正文');//事件。stopperpagation()；//阻止事件冒泡返回false })；});以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持我们！