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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
js null,undefined,字符串小结
Aug 21 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
详解vue-router 初始化时做了什么
Jun 11 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
vue实现打地鼠小游戏
Aug 21 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
php抽奖小程序的实现代码
2013/06/18 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
php数据访问之增删改查操作
2016/05/09 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
linux下安装easy_install的方法
2013/02/10 Python
Python 命令行非阻塞输入的小例子
2013/09/27 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
基于python实现雪花算法过程详解
2019/11/16 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
python相对企业语言优势在哪
2020/06/12 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
JS原生实现轮播图的几种方法
2021/03/23 Javascript
学习十八大精神心得体会
2013/12/31 职场文书
工伤赔偿协议书
2014/04/15 职场文书
施工员岗位职责
2015/02/10 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
Golang 并发编程 SingleFlight模式
2022/04/26 Golang