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 相关文章推荐
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
JS实现星星海特效
Dec 24 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 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 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
Python中标准库OS的常用方法总结大全
2017/07/19 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
物业经理求职自我评价
2013/09/22 职场文书
大学军训通讯稿
2014/01/13 职场文书
美发活动策划书
2014/01/14 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
爱心捐款倡议书
2014/04/14 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
学生鉴定评语大全
2014/05/05 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
青年联谊会致辞
2015/07/31 职场文书
python如何正确使用yield
2021/05/21 Python