什么是事件冒泡？

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

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. 从极大似然估计的角度理解深度学习中loss函数

    从极大似然估计的角度理解深度学习中loss函数 为了理解这一概念,首先回顾下最大似然估计的概念: 最大似然估计常用于利用已知的样本结果,反推最有可能导致这一结果产生的参数值,往往模型结果已经确定,用于 ...

  2. 源码编译Oprofile

    上菜了翠花:首先编译Oprofile需要三个源码:binutils.popt与oprofile Linux版(由于是在64位的linux系统编译-----敬请参考“在64位linux上编译32位程序” ...

  3. 洛谷P3746 [六省联考2017]组合数问题

    题目描述 组合数 C_n^mCnm​ 表示的是从 n 个互不相同的物品中选出 m 个物品的方案数.举个例子,从 (1;2;3) 三个物品中选择两个物品可以有 (1;2);(1;3);(2;3) 这三种 ...

  4. win10 MongoDB安装

    1.下载地址https://www.mongodb.com/download-center#community 2.安装步骤 点击next同意安装,下面这一步选择Custom 自定义目录 注意:在这一 ...

  5. [Linux C]系统调用(system call)和库函数调用(Library functions)

    Linux 下对文件操作有两种方式:系统调用(system call)和库函数调用(Library functions).系统调用实际上就是指最底层的一个调用,在 linux 程序设计里面就是底层 调 ...

  6. 用于构建 RESTful Web 服务的多层架构

    作者:Bruce Sun, Java 架构师, IBM 出处:http://www.ibm.com/developerworks/cn/web/wa-aj-multitier/ 用于构建 RESTfu ...

  7. POJ 1883 排序 ( 水 + next_permutation )

    链接:传送门 题意:略 思路:next_permutation(),水,但是要注意一点的是如果是最后一个排列next_permutation会返回第一个排列并结束,所以如果到了最后一个排列还不是第k个 ...

  8. poj 2954 Triangle 三角形内的整点数

    poj 2954 Triangle 题意 给出一个三角形的三个点,问三角形内部有多少个整点. 解法 pick's law 一个多边形如果每个顶点都由整点构成,该多边形的面积为\(S\),该多边形边上的 ...

  9. hadoop中HDFS文件系统 nameNode出现的问题 nameNode无法打开

    1,修改core-site.xml文件,先改成localhost,将所有进程关闭stop-all.sh(或者是先关闭所有进程,然后再修改文件),然后重启,在修改core-site.xml文件成ip地址 ...

  10. echarts图表属性说明

    参考博客: https://blog.csdn.net/luanpeng825485697/article/details/76691965