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 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
JavaScript 仿关机效果的图片层
Dec 26 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 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
我的论坛源代码(八)
2006/10/09 PHP
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
javascript history对象详解
2017/02/09 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
Python实现的几个常用排序算法实例
2014/06/16 Python
Python中的ceil()方法使用教程
2015/05/14 Python
python paramiko模块学习分享
2017/08/23 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
python实现代码统计器
2019/09/19 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
Django框架models使用group by详解
2020/03/11 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
什么是URL
2015/12/13 面试题
宿舍违规用电检讨书
2014/02/16 职场文书
高中军训感想300字
2014/03/04 职场文书
个人授权委托书格式
2014/08/30 职场文书
庆元旦演讲稿
2014/09/15 职场文书
慰问信格式
2015/02/14 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js