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 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
react 生命周期实例分析
May 18 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
JavaScript中清空数组的三种方式
2017/03/22 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
python抓取网页内容示例分享
2014/02/24 Python
Python Socket编程入门教程
2014/07/11 Python
python创建临时文件夹的方法
2015/07/06 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
python实现Adapter模式实例代码
2018/02/09 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
python中count函数知识点浅析
2020/12/17 Python
哈理工毕业生的求职信
2013/12/22 职场文书
机电专业个人求职信范文
2013/12/30 职场文书
档案室主任岗位职责
2014/02/12 职场文书
企业总经理岗位职责
2014/02/13 职场文书
10的分与合教学反思
2014/04/30 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
学校财务管理制度
2015/08/04 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python