什么是事件冒泡？

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

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. 剑指offer——03从尾至头打印列表（Python3）

    思路:相当于数据结构中的链表就地逆置,可以使用头插法来实现. 代码: class Solution:     # 返回从尾部到头部的列表值序列,例如[1,2,3]     def printListF ...

  2. Extjs Grid 各种Demo

    grid的一个渲染效果 Ext.define('cfWeb.view.accountSetting.OrgManageView',{ alias : 'widget.orgManageView', e ...

  3. 关于TCP的三次握手和四次分手 专题

    客户端TCP状态迁移:CLOSED->SYN_SENT->ESTABLISHED->FIN_WAIT_1->FIN_WAIT_2->TIME_WAIT->CLOSE ...

  4. 洛谷P4016 负载平衡问题(最小费用最大流)

    题目描述 GG 公司有 nn 个沿铁路运输线环形排列的仓库,每个仓库存储的货物数量不等.如何用最少搬运量可以使 nn 个仓库的库存数量相同.搬运货物时,只能在相邻的仓库之间搬运. 输入输出格式 输入格 ...

  5. Android 制作类似支付圆圈和打钩界面ProgressWheel

    首先要说明的是,制作圆圈旋转的效果并不是博主做的,是参照了github上的一个代码,只是在上面添加了修改,对其优化并增加了一个打钩的动画. 先来看下效果,1+的手机获取root权限真是难,没法录屏,只 ...

  6. Python写99乘法表

    #!/usr/bin/python# -*- encoding:utf-8 -*- for i in range(1,10):    s=''    for j in range(1,i+1):    ...

  7. ajax返回值

    前端: <html> <head> <meta name="viewport" content="width=device-width&qu ...

  8. Functional programming-函数式编程

    In computer science, functional programming is a programming paradigm—a style of building the struct ...

  9. day09-3 数据类型总结，深浅拷贝

    目录 数据类型总结,深浅拷贝 存一个值还是多个值 有序 or 无序 可变 or 不可变 浅拷贝和深拷贝的区别(只针对可变类型) 1.拷贝: 3.深拷贝 总结: 数据类型总结,深浅拷贝 存一个值还是多个 ...

  10. [USACO 2009 Feb Gold] Fair Shuttle (贪心+优先队列)

    题目大意:有N个站点的轻轨站,有一个容量为C的列车起点在1号站点,终点在N号站点,有K组牛群,每组数量为Mi(1≤Mi≤N),行程起点和终点分别为Si和Ei(1≤Si<Ei≤N).计算最多有多少 ...