什么是事件冒泡？

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

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. http server优雅启停原理及验证

    问题背景 在 http应用程序重启时,如果直接 kill -9 使程序退出,然后再启动,会存在的问题: 旧的请求未处理完,如果服务端进程直接退出,会造成客户端连接中断(收到 RST) 新请求打过来,服 ...

  2. 用Latex做介绍自己和团队科研的网页

    最近实验室师妹用网上的一些模板改了改做了几个网页.感觉还可以.但是实际上总觉得好像和韩家炜.周志华他们的页面差点什么. 最近找论文时发现奥地利的hornik老先生页面居然latex做的,然后找到了下面 ...

  3. 多帧图片转gif

    示例 工具photosh cc2017 1: 文件--> 脚本--> 将文件载入堆栈--> 选择文件-->勾选窗口的时间轴-->底部 从图层建立帧--> 设置时间延 ...

  4. surfaceView实现拍照功能

    1.布局中只有一个SurfaceView和Button,初始SurfaceView通过surface.getHolder获得SurfaceHolder类 SurfaceView sfv= (Surfa ...

  5. day01 编程概述及计算机组成原理

    目录 编程概述 计算机硬件的五大组成部分 Central Processing Unit(cpu中央处理器) 存储器 输入,输出设备 打开QQ的流程 计算机五大组成部分补充 多核CPU ×64/x86 ...

  6. 配置HTTPS加密的快速参考指南

    Nginx ssl_protocols TLSv1 TLSv1.1 TLSv1.2 阿帕奇 SSLProtocol All -SSLv2 -SSLv3 密码套房 选择密码套件可能很困难,它们的名称可能 ...

  7. laravel 常用单词翻译

    1.ORM:(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping), 翻译为:对象关系映射. 是一种程序技术,用于实现面向对象编程语言里不同类型系统的 ...

  8. HDU 5533 Dancing Stars on Me（ 有趣的计算几何 ）

    链接:传送门 题意:给出 n 个点,判断能不能构成一个正 n 边形,这 n 个点坐标是整数 思路:这道题关键就在与这 n 个点坐标是正整数!!!可以简单的分析,如果 n != 4,那一定就不能构成正 ...

  9. 查看系统进程:ps、top

    1.ps命令:提供最近进程的快照.显示当前活跃进程的简要信息. 常见使用: (1)与grep命令配合查找是否有相应进程存活 ps -ef | grep ksmd ps -Af | grep ksmd ...

  10. 安装虚拟机和Linux系统

    - 安装虚拟机 点击下载虚拟机 点击下载Linux系统 菜鸟网的Linux系统教程 1.安装虚拟机 在弹出的面板中选择标准--继续. 选择第二个选项,因为我们下载的光盘的镜像,所以直接选择刚才的dvd ...