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 来进行我们的程序开发
Jun 23 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
小谈angular ng deploy的实现
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的安全
2006/10/09 PHP
PHP5 面向对象(学习记录)
2009/12/02 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
解析JavaScript中的标签语句
2013/06/19 Javascript
js select option对象小结
2013/12/20 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
vue实现全选和反选功能
2017/08/31 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
python定时执行指定函数的方法
2015/05/27 Python
Python reduce()函数的用法小结
2017/11/15 Python
Python中logging实例讲解
2019/01/17 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
python实现随机加减法生成器
2020/02/24 Python
Python调用C语言程序方法解析
2020/07/07 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
学校班班通实施方案
2014/06/11 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
辞职离别感言
2015/08/04 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技
数据设计之权限的实现
2022/08/05 MySQL