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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
js点击选择文本的方法
Feb 09 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 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
ftp类(example.php)
2006/10/09 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
Python实现完整的事务操作示例
2017/06/20 Python
Python中单、双下划线的区别总结
2017/12/01 Python
python读取和保存图片5种方法对比
2018/09/12 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
机工车间主任岗位职责
2014/03/05 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书