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 相关文章推荐
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 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变量引用的面试题
2010/08/08 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
PHP中phar包的使用教程
2017/06/14 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
python图片验证码生成代码
2016/07/02 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
Python3 Random模块代码详解
2017/12/04 Python
Python实现简单的语音识别系统
2017/12/13 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
详解Python3的TFTP文件传输
2018/06/26 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
美国性感内衣店:Yandy
2018/06/12 全球购物
大学秋游活动方案
2014/02/11 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
css3 选择器
2022/05/11 HTML / CSS