什么是事件冒泡？

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

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. 5. Longest Palindromic Substring[M]最长回文子串

    题目 Given a string s, find the longest palindromic substring in s. You may assume that the maximum le ...

  2. Java基础——GridBagLayout布局

    1.GridBagLayout布局管理器非常灵活,每个 GridBagLayout 对象维持一个动态的矩形单元网格: 2.需要和它的约束类(GridBagConstraints类)一起使用: 3.Gr ...

  3. java同步锁的正确使用

    同步锁分类 对象锁(this) 类锁(类的字节码文件对象即类名.class) 字符串锁(比较特别) 应用场景 在多线程下对共享资源的安全操作. 需求:启动5个线程对共享资源total进行安全操作. 同 ...

  4. sql调优《二》

    1.数据库设计(是否复合范式,是否合理归档.分区.分表等) 2.硬件基础架构 (设备规格,硬件性能,负载均衡,容灾等) 3.ql语句的写法.索引和统计信息,事务和锁,应用程序访问代码(连接过多.频繁开 ...

  5. 页面加载通过javascript来修改控件属性

    function changeFormElementStatus(tagNames) {            var tagNameArr = tagNames.split("," ...

  6. ZBrush中Tool工具的保存

    ZBrush软件的界面及操作方法与其他的三维软件完全不同,很多初学者常常会觉得有些困难,接下来我们就讲解一下ZBrush®最为基础的操作-Tool工具的保存. 首先要明白什么是Tool工具?我们创建的 ...

  7. 带你学C带你飞！

    C语言免费课程推荐:带你学C带你飞! 想学习C语言,首先就要了解什么是C语言: C语言是一门通用计算机编程语言,应用广泛.C语言的设计目标是提供一种能以简易的方式编译.处理低级存储器.产生少量的机器码 ...

  8. 使用multiprocessing模块操作进程

    1.Process模块介绍 process模块是一个创建进程的模块,借助这个模块,就可以完成进程的创建. Process([group [, target [, name [, args [, kwa ...

  9. 51nod 1392 装盒子（费用流）

    如果权值为\(1\)就是最长反链. 然而并不是.考虑用费用流. 把每一个盒子\(i\)拆成i和\(i+n\). 设源点为\(S\),汇点为\(T\). \(S\)向每一个i连容量为\(1\),费用为\ ...

  10. HDU1061 - Rightmost Digit

    Given a positive integer N, you should output the most right digit of N^N. Input The input contains ...