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实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
Js实现自定义右键行为
Mar 26 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
PHPMailer发送邮件
2016/12/28 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
webpack配置sass模块的加载的方法
2017/07/30 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
python实现聚类算法原理
2018/02/12 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
python PIL模块的基本使用
2020/09/29 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
中专毕业生自荐信
2013/11/16 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
幼儿教师国培感言
2014/02/19 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
搞笑爱情保证书
2014/04/29 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
售房委托书
2014/08/30 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
会议接待欢迎标语
2014/10/08 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
小学运动会加油稿
2015/07/22 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
MySQL 查询速度慢的原因
2021/05/25 MySQL
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
Python Django获取URL中的数据详解
2021/11/01 Python
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL