冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。
下面是HTML代码部分：
内层span元素
外层div元素
<div id="msg">
对应的jQuery代码如下：
外层div元素被点击.
"; $('#msg').html(txt); }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "body元素被点击.
"; $('#msg').html(txt); }); })当点击span时，会触发div与body的点击事件。点击div时会触发body的点击事件。
如何防止这种冒泡事件发生呢？
修改如下：
外层div元素被点击.
"; $('#msg').html(txt); event.stopPropagation(); // 阻止事件冒泡 }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "body元素被点击.
"; $('#msg').html(txt); }); })event.stopPropagation(); // 阻止事件冒泡
有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。
下面是案例：
文本框的值不能为空.
"); //提示信息 event.preventDefault(); //阻止默认行为 ( 表单提交 ) } }) })html部分：
还有一种防止默认行为的方法就是returnfalse。效果一样。
代码如下：
文本框的值不能为空.
"); //提示信息 return false; } }) })同理，上面的冒泡事件也可以通过returnfalse来处理。
外层div元素被点击.
"; $('#msg').html(txt); return false; }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "body元素被点击.
"; $('#msg').html(txt); }); })以上这篇深入理解jQuery之防止冒泡事件就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/jquery/48521.html