jQuery如何防止这种冒泡事件发生


Posted in Javascript onFebruary 27, 2015

冒泡事件就是点击子节点,事件会向上传递,最后触发父节点,祖先节点的点击事件。

html代码部分:

<body>

    <div id="content">

        外层div元素

        <span>内层span元素</span>

        外层div元素

    </div>

    <div id="msg"></div>

</body>

jQuery代码如下:

<script type="text/javascript">

$(function(){

    $('span').bind("click",function(){

        var txt = $('#msg').html() + "<p>内层span元素被点<p/>";

        $('#msg').html(txt);

    });

    $('#content').bind("click",function(){

        var txt = $('#msg').html() + "<p>外层div元素被点击<p/>";

        $('#msg').html(txt);

    });

    $("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').bind("click",function(event){

        var txt = $('#msg').html() + "<p>内层span元素被点击<p/>";

        $('#msg').html(txt);

        event.stopPropagation();    // 阻止事件冒泡

    });

    $('#content').bind("click",function(event){

        var txt = $('#msg').html() + "<p>外层div元素被点击<p/>";

        $('#msg').html(txt);

        event.stopPropagation();    // 阻止事件冒泡

    });

    $("body").bind("click",function(){

        var txt = $('#msg').html() + "<p>body元素被点击<p/>";

        $('#msg').html(txt);

    });

})

</script>

        有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证,就不应该跳转。这时候可以通过设置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').bind("click",function(event){

        var txt = $('#msg').html() + "<p>内层span元素被点<p/>";

        $('#msg').html(txt);

        return false;

    });

    $('#content').bind("click",function(event){

        var txt = $('#msg').html() + "<p>外层div元素被点<p/>";

        $('#msg').html(txt);

        return false;

    });

    $("body").bind("click",function(){

        var txt = $('#msg').html() + "<p>body元素被点<p/>";

        $('#msg').html(txt);

    });

})

</script>

jQuery对DOM的事件触发具有冒泡特性。有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡。这个时候就要阻止 jQuery.Event冒泡。

Javascript 相关文章推荐
js触发onchange事件的方法说明
Mar 08 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
js禁止表单重复提交
Aug 29 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 #Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 #Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 #Javascript
Javascript writable特性介绍
Feb 27 #Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 #Javascript
JavaScript函数详解
Feb 27 #Javascript
浅谈JavaScript的事件
Feb 27 #Javascript
You might like
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
js 目录列举函数
2008/11/06 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
node.js基础知识小结
2018/02/26 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
django用户登录验证的完整示例代码
2019/07/21 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
python线程join方法原理解析
2020/02/11 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
python剪切视频与合并视频的实现
2020/03/03 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
Pycharm调试程序技巧小结
2020/08/08 Python
中国电视购物:快乐购
2017/02/04 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
离职证明范本
2015/06/12 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
Django+Celery实现定时任务的示例
2021/06/23 Python
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL