<1>

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

<head>

    <title>防止起泡</title>

    <script src="script/jquery-1.11.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("div li").click(function (e) {

                alert("我是li"); return false;

            })

            $("div ul").click(function (e) { //这个e事实上就是event 是一个事件的对象

                alert("我是ul"); e.stopPropagation();

            })

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

                alert("我是div");

            })

            //e.stopPropagation();就是阻止冒泡，假设不写这句，在弹出 “我是li”后就会弹出“我是ul”，然后就会弹出“我是div”。

在这里加入了e.stopPropagation();之后，“我是div”就不会弹出来了。

由于已经被阻止了。事实上这句也可也用 return false来替代

        })

    </script>

</head>

<body>

<div>

    <ul>

       <!-- li在ul里，ul在div中。仅仅要点击了li，也就是点击了ul,也就是点击了div。在上面的函数中，先弹出 “我是li”然后弹出“我是ul”，最后弹出“我是div” 一层一层的冒泡，而阻止冒泡的方式就是调用 事件的对象来调用stopPropagation()方法。

这个事件的对象就是函数的參数 e 这个e的名字能够随便取-->

        <li>请点击我</li>

    </ul>

</div>

</body>

</html>

说明：

1.一个事件起泡相应触发的是上层的同一事件

　     单击two的时候就会起泡触发one单击的事件。

单机tree时，会同一时候触发two，然后触发one

2.假设在click事件中，在你要处理的事件之前加上e.preventDefault();

　那么就取消了行为（通俗理解：相当于做了个return操作），不运行之后的语句了。

3.e.stopPropagation()仅仅要在click事件中，就不会触发上层click事件。



版权声明：本文博客原创文章，博客，未经同意，不得转载。

事件冒泡 ，停止事件冒泡 e.stopPropagation()的更多相关文章

  1. js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  2. javascript 停止事件冒泡以及阻止默认事件冒泡

    停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // ...

  3. jQuery停止事件冒泡

    event.stopPropagation(); 在jQuery中提供了stopPropagation()方法来停止事件冒泡.终止事件在传播过程的捕获.目标处理或起泡阶段进一步传播.调用该方法后,该节 ...

  4. JS停止事件冒泡

    ..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopP ...

  5. js 停止事件冒泡 阻止浏览器的默认行为（阻止a标签跳转 ）

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了 ...

  6. js 停止事件冒泡 阻止浏览器的默认行为（比如阻止超连接 # ）

      在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ...

  7. js阻止浏览器的默认行为以及停止事件冒泡（用JQuery实现回车提交，兼容IE、FF浏览器） 转

    1.阻止浏览器的默认行为 function stopDefault(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e && e.preventDefault) { / ...

  8. JS-Object (3) JSON; Event Object相关知识（事件冒泡，事件监听, stopPropagation()

    通常用于在网站上表示和传输数据 使用JavaScript处理JSON的所有工作,包括访问JSON对象中的数据项并编写自己的JSON. JSON text基本上就像是一个JavaScript对象,这句话 ...

  9. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  10. js 停止事件冒泡 阻止浏览器的默认行为

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 浏览器默认行为: 在form中按回车键就会提交表单:单击鼠标右键就会弹出context menu. ...

随机推荐

  1. 【译】ASP.NET MVC 5 教程 - 2：添加控制器

    原文:[译]ASP.NET MVC 5 教程 - 2:添加控制器 MVC 表示 模型-视图-控制器.MVC 是一种用于开发应用程序的模式,具备良好架构,可测试和易于维护.基于 MVC 应用程序中包含: ...

  2. 〖Groovy〗语言使用贴士（Tips）(转)

    [Groovy]是一门运行在[JVM]之上的动态语言.由[James Strachan]和[Bob McWhirter]于2003年启动开发,之后于2004年3月成为[JSR 241](Java Sp ...

  3. 全栈JavaScript之路（十八）HTML5 自己定义数据属性

    HTML5 规范规定,用户能够为元素 自己定义非标准属性, 可是要加入 data- 前缀. 目的是为元素提供与页面渲染无关的信息.或者语义信息.这些属性名能够任意加入,仅仅要带上前缀 data- 开头 ...

  4. 《UNIX编程环境》的源代码的第二个版本Ubuntu下编

    1.在http://www.apuebook.com下载源代码 2. 视图READ root@ubuntu:/home/wl/mywork/apue.2e# cat -n README 1 Read ...

  5. 队列优化和斜率优化的dp

    可以用队列优化或斜率优化的dp这一类的问题为 1D/1D一类问题 即状态数是O(n),决策数也是O(n) 单调队列优化 我们来看这样一个问题:一个含有n项的数列(n<=2000000),求出每一 ...

  6. Java4Android之BlockingQueue

    在研究Smack的源码的时候,我对它的连接Connection以及派生类XMPPConnection的关注是最多的,由于一个即时通信程序,它的网络模块必是它的核心. 而我非常在乎它是怎样实现的. 在收 ...

  7. Effective C++规定45 附加代码

    这部分是额外的代码的博客.键45条款想法已经实现. #include<iostream> using namespace std; template<typename T> c ...

  8. Web中的性能优化

    优化Web中的性能 简介 web的优化就是一场阻止http请求最终访问到数据库的战争.优化的方式就是加缓存,在各个节点加缓存. web请求的流程及节点 熟悉流程及节点,才能定位性能的问题.而且优化的顺 ...

  9. poj1185炮兵阵地

    #include <iostream> #include <cstdio> #include <cmath> #include <algorithm> ...

  10. Cocos2d-x 3.2 Lua演示样例 XMLHttpRequestTest（Http网络请求）

    Cocos2d-x 3.2 Lua演示样例 XMLHttpRequestTest(Http网络请求)     本篇博客介绍Cocos2d-x 3.2Lua演示样例中的XMLHttpRequestTes ...