什么是事件冒泡？

事件冒泡就是当父元素和子元素存在同一事件时在子元素的事件处理程序中会自动调用其父级元素的事件处理程序。

demo：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>事件冒泡</title>

    <script src="jquery-1.8.3.min.js"></script>

    <script>

        $(function () {

            $("#div").click(function () {

                $(this).text("我是div");

            });

            $("#img").click(function () {

                $(this).parent().css("border", "1px solid red");

            });

        })

    </script>

</head>

<body>

    <div id="div">

        <img id="img" src="images/gd.jpg" />

    </div>

</body>

</html>

当点击div下的img元素时界面效果如图：

通过上面代码我们只是想当鼠标点击图片时让div的边框成红色并没有要删除图片，但他在执行子元素（img)的事件处理程序时自动调用了父级元素（div）这就是事件冒泡。

如何取消事件冒泡？

事件冒泡是可以由程序员手工取消的也就是在子元素的事件处理程序中手动的停止调用父级元素

demo：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>事件冒泡</title>

    <script src="jquery-1.8.3.min.js"></script>

    <script>

        $(function () {

            $("#div").click(function () {

                $(this).text("我是div");

            });

            $("#img").click(function () {

                $(this).parent().css("border", "1px solid red");  event.stopPropagation();
            });

        })

        </script>

</head>

<body>

    <div id="div">

        <img id="img" src="images/gd.jpg" />

    </div>

</body>

</html>

如上所示代码就可以取消事件冒泡

demo：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>事件冒泡</title>

    <script src="jquery-1.8.3.min.js"></script>

    <script>

        $(function () {

            $("#div").click(function () {

                if( event.target == event.currentTarget){

                    $(this).text("我是div");

            }

            });

            $("#img").click(function () {

                if( event.target == event.currentTarget){

                $(this).parent().css("border", "1px solid red");

                }

            });

        })

    </script>

</head>

<body>

    <div id="div">

        <img id="img" src="images/gd.jpg" />

    </div>

</body>

</html>

这种方法也能解决上述问题单其并没有停止事件冒泡他判断其事件的触发元素和当前元素是否是同一个元素如果是则执行处理代码，如果不是则不执行处理代码，但事件还是会逐级向上冒泡直到body元素为止

关于JQuery中的事件冒泡的更多相关文章

  1. jquery 中的事件冒泡

    废话少说,先来一段代码热热身: <!DOCTYPE html> <html> <head> <title>demo</title> < ...

  2. jQuery中的事件冒泡

    1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...

  3. JQuery中阻止事件冒泡的两种方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  4. JQuery中阻止事件冒泡方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation();         $("#div1").mousedown(function( ...

  5. 在jQuery中解决事件冒泡问题

    <pre name="code" class="html">事件会按照DOM层次结构像水泡一样不断向上直至顶端 解决方法:在事件处理函数中返回fal ...

  6. 你知道JQuery中的事件冒泡吗，他是怎么执行的，如何来停止冒泡事件？

    事件冒泡 首先需要知道什么是事件冒泡? 事件冒泡是从里面的往外面开始触发的,就是点击子节点,会向上触发父节点,祖先节点的点击事件 demo: <html xmlns="http://w ...

  7. jQuery 中的事件冒泡和阻止默认行为

    1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...

  8. 【jQuery】jQuery中的事件捕获与事件冒泡

    在介绍之前,先说一下JavaScript中的事件流概念.事件流描述的是从页面中接受事件的顺序.   一.事件冒泡( Event Bubbling)            IE 的事件流叫做事件冒泡,即 ...

  9. jquery中怎样防止冒泡事件

    jquery中怎样防止冒泡事件 1.利用event.stopPropagation() 2.利用return false 3.利用event.preventDefault()

随机推荐

  1. SSH不允许进行DNS解析

    ssh设置DNS不解析 sed -i "s/#UseDNS yes/UseDNS no/"  /etc/ssh/sshd_config/etc/init.d/sshd restar ...

  2. Kafka.net使用编程入门

    最近研究分布式消息队列,分享下! 首先zookeeper  和 kafka 压缩包 解压 并配置好! 我本机zookeeper环境配置如下: D:\Worksoftware\ApacheZookeep ...

  3. Mac 如何寻找Mac自带的IDLE

    Mac 如何寻找Mac自带的IDLE 每次要打开IDLE时,需要如下动作:打开terminal --> 输入idle --> 回车,就自动打开IDLE了 图标如下: 选择在“Finder中 ...

  4. Servlet的生命周期和Jsp的生命周期

    Servlet的生命周期: 1)构造方法(第1次访问) 2)init方法(第1次访问) 3)service方法 4)destroy方法 Jsp的生命周期 1)翻译: jsp->java文件 2) ...

  5. shell脚本切割tomcat日志文件

    转自:http://www.cnblogs.com/lishun1005/p/6054816.html 鉴于在调试logback和log4j的文件切割一直无法成功,随性用shell写个脚本用来切割to ...

  6. [置顶] Elon Musk (伊隆·马斯克)：无限的创想与意志的胜利

    Elon Musk (伊隆·马斯克):无限的创想与意志的胜利 很多人说 Steve Jobs 很伟大,这一点我认同.但是,单纯从创造出的产物而言,Elon Musk 的成就毫无疑问远远超越 Steve ...

  7. Linux下实时查看GPU状况

    1. 显示当前GPU使用情况 Nvidia自带了一个nvidia-smi的命令行工具,会显示显存使用情况: $ nvidia-smi 输出如下: 2. 周期性输出GPU使用情况 但是有时我们希望不仅知 ...

  8. 小学生绞尽脑汁也学不会的python(初识面对对象)

    小学生绞尽脑汁也学不会的python(初识面对对象) 一. 面向对象思想 1. 面向过程. 重点在"过程". 按照实物的发展流程. 先干嘛,后干嘛, 最后干嘛.... 优点: 简单 ...

  9. spring mvc 下载的时候中文文件名不显示

    Headers.add("Content-Disposition", "attachment;filename=" + new String(file.getB ...

  10. 在Vue中使用了Swiper ，动态从后台获取数据的之后，swiper滑动失效？？

    在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...