jQuery阻止事件冒泡具体实现


Posted in Javascript onOctober 11, 2013

下面是html代码部分:

<body>
<div id="content">
    外层div元素
    <span>内层span元素</span>
    外层div元素
</div>
<div id="msg"></div>
</body>

对应的jQuery代码如下:

<script type="text/javascript">
$(function(){
    // 为span元素绑定click事件
    $('span').bind("click",function(){
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息
        $('#msg').html(txt);// 设置html信息
    });
    // 为div元素绑定click事件
    $('#content').bind("click",function(){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
    });
    // 为body元素绑定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
        $('#msg').html(txt);
    });
})
</script>

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

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

修改如下:

<script type="text/javascript">
$(function(){
       // 为span元素绑定click事件
    $('span').bind("click",function(event){
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
        $('#msg').html(txt);
        event.stopPropagation();    //  阻止事件冒泡
    });
    // 为div元素绑定click事件
    $('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
        event.stopPropagation();    //  阻止事件冒泡
    });
    // 为body元素绑定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
        $('#msg').html(txt);
    });
})
</script>

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

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

下面是案例:

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

html部分:

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

还有一种防止默认行为的方法就是return false。效果一样。

代码如下:

<script type="text/javascript">
$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val();  //获取元素的值
         if(username==""){     //判断值是否为空
             $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
             return false;
         }
   })
})
</script>

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

<script type="text/javascript">
$(function(){
       // 为span元素绑定click事件
    $('span').bind("click",function(event){
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
        $('#msg').html(txt);
        return false;
    });
    // 为div元素绑定click事件
    $('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
        return false;
    });
    // 为body元素绑定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
        $('#msg').html(txt);
    });
})
</script>
Javascript 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
Javascript的闭包
Dec 31 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
Angular5.1新功能分享
Dec 21 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
JS定时器实例详细分析
Oct 11 #Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 #Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 #Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 #Javascript
Js base64 加密解密介绍
Oct 11 #Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 #Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 #Javascript
You might like
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
WAF的正确bypass
2017/01/05 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
JavaScript Timer实现代码
2010/02/17 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
Django model反向关联名称的方法
2018/12/15 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
几个数据库方面的面试题
2016/07/01 面试题
医学专业毕业生个人求职信
2013/12/25 职场文书
四年级评语大全
2014/04/21 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
融资租赁计划书
2014/04/29 职场文书
服务宗旨标语
2014/07/01 职场文书
初中班主任心得体会
2016/01/07 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技