利用JQuery阻止事件冒泡


Posted in Javascript onDecember 01, 2016

冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡。

通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡。

<style>
 #content{
  width: 140px;
  border: 1px solid blue;
 }
 #msg{
  width: 100px;
  height: 100px;
  margin: 20px;
  border: 1px solid red;
 }
</style>
<body>
  <div id="content">
 外层div
 <div id="msg">
  内层div
 </div>
 </div>

</body>

显示结果

利用JQuery阻止事件冒泡

对应的jQuery代码如下:

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
 $(function(){
 // 为内层div绑定click事件
 $("#msg").click(function(){
  alert("我是小div");
 });
 // 为外层div元素绑定click事件
 $("#content").click(function(){
  alert("我是大div");
 });
 // 为body元素绑定click事件
 $("body").click(function(){
  alert("我是body");
 });
 });
 </script>

    当点击小div时,会触发大div与body 的点击事件。点击大div时会触发body的点击事件。

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

修改如下:

event.stopPropagation(); // 阻止事件冒泡

有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话,就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。

html部分

<body>
 <form action="test.html">
  用户名:<input type="text" id="username" />
  <br/>
  <input type="submit" value="提交" id="sub"/>
 </form>
 </body>

利用JQuery阻止事件冒泡

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
 $(function(){
  $("#sub").click(function(event){
  //获取元素的值,val() 方法返回或设置被选元素的值。
  var username = $("#username").val(); 
  //判断值是否为空
  if(username==""){ 
   //提示信息
   //alert("文本框的值不能为空");
   $("#msg").html("<p>文本框的值不能为空.</p>"); 
   //阻止默认行为 ( 表单提交 )
   event.preventDefault(); 
  }
  });
 });
 </script>

//阻止默认行为 ( 表单提交 )
                    event.preventDefault(); 
还有一种防止默认行为的方法就是return false。效果一样。

代码如下:

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
 $(function(){
  $("#sub").click(function(event){
  //获取元素的值,val() 方法返回或设置被选元素的值。
  var username = $("#username").val(); 
  //判断值是否为空
  if(username==""){ 
   //提示信息
   //alert("文本框的值不能为空");
   $("#msg").html("<p>文本框的值不能为空.</p>"); 
   //阻止默认行为 ( 表单提交 )
   //event.preventDefault(); 
   return false;
  }
  });
 });
 </script>

同理,上面的冒泡事件也可以通过return false来处理。

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
 $(function(){
 // 为内层div绑定click事件
 $("#msg").click(function(event){
  alert("我是小div");
  //event.stopPropagation(); // 阻止事件冒泡
  return false;
 });
 // 为外层div元素绑定click事件
 $("#content").click(function(event){
  alert("我是大div");
  //event.stopPropagation(); // 阻止事件冒泡
   return false;
 });
 // 为body元素绑定click事件
 $("body").click(function(event){
  alert("我是body");
  //event.stopPropagation(); // 阻止事件冒泡
  return false;
 });
 });

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
JavaScript图片处理与合成总结
Mar 04 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue.js第三天学习笔记(计算属性computed)
Dec 01 #Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 #Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 #Javascript
jQuery中ajax错误调试分析
Dec 01 #Javascript
JQuery学习总结【二】
Dec 01 #Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 #Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 #Javascript
You might like
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
php学习 字符串课件
2008/06/15 PHP
php 全文搜索和替换的实现代码
2008/07/29 PHP
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
layui使用label标签的方法
2019/09/14 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
实例讲解python函数式编程
2014/06/09 Python
flask实现验证码并验证功能
2019/12/05 Python
解决python replace函数替换无效问题
2020/01/18 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
四年级下册教学反思
2014/02/01 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
求职信标题怎么写
2014/05/26 职场文书
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android