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 相关文章推荐
JavaScript几种形式的树结构菜单
May 10 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
原生js实现弹出层效果
Jan 20 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
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 array_flip() 删除数组重复元素
2009/01/14 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
python调用java的Webservice示例
2014/03/10 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
学校经典推荐信
2013/10/30 职场文书
最新党员思想汇报
2014/01/01 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
我的小天地教学反思
2014/04/30 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
Go 语言结构实例分析
2021/07/04 Golang
JS数组去重详情
2021/11/07 Javascript
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
Nginx配置根据url参数重定向
2022/04/11 Servers