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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
子页向父页传值示例
Nov 27 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
解决一个微信号同时支持多个环境网页授权问题
Aug 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设计模式之装饰者模式
2012/02/29 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
PHP Cookie学习笔记
2016/08/23 PHP
JS的反射问题
2010/04/07 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Python selenium自动化测试模型图解
2020/04/15 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
手机配件第一品牌:ZAGG
2017/05/28 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
建设投标担保书
2014/05/13 职场文书
财务务虚会发言材料
2014/10/20 职场文书
个人收入证明格式
2015/06/24 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang
详解Vue3使用axios的配置教程
2022/04/29 Vue.js