<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. 【iOS开发】 常遇到的Crash和Bug处理

    一,Unknown type name .... 如果是报这个错误,多半是你的对象类型没有被识别,检查是不是没有引用对应的库或者头文件在你的文件头部分,还有可能是循环引用导致的,循环引用的解决方法就是 ...

  2. C#操作Cookie

    /* 创建者:菜刀居士的博客  * 创建日期: 2014年09月02号  * 功能:操作Cookie  *  */ namespace Net.String.ConsoleApplication { ...

  3. SE 2014年3月31日

    一. 描述OSPF划分区域的优势. OSPF划分区域的优势主要表现在以下几个方面: 1. 当网络中路由器的数量增大时,划分区域有利于减轻一部分性能较低的设备的处理和维护LSA数据库. 2. 区域的划分 ...

  4. .NET开发必看资料53个+经典源码77个

    目录0豆下载:http://down.51cto.com/data/426019 附件预览: 基于.net构架的留言板项目大全源码 http://down.51cto.com/zt/70 ASP.ne ...

  5. 李林APUE之进程的封装

    1．子进程是父进程的副本,获得父进程的数据空间/堆/栈,父子进程共享代码段．子进程从fork后開始运行.返回值=0表示子进程,由于子进程能够通过函数来获取父进程的ID,可是父进程无法知道子进程的ID． ...

  6. windows phone 页面传值（7）

    原文:windows phone 页面传值(7) 在windows phone 中微软为我们提供了页面间传递参数的解决方案,下面就为大家介绍使用方法,页面传值的案例中我们建立两个页面,一个是MainP ...

  7. ActiveMQ相关背景(转)

    概述 介绍中间件.MOM.JMS.ActiveMQ,及相互的关系. 中间件 由于业务的不同.技术的发展.硬件和软件的选择有所差别,导致了异构组件或应用并存的局面.要使这些异构的组件协同工作,一个有效的 ...

  8. d3d纹理参数

    D3DTEXTURESTAGESTATETYPE 纹理状态定义了一个多层次的复杂的操作质感.一些采样工作状态设置顶点,有些组像素操作. 纹理层次状态可以快速保存并返回状态. typedef enum ...

  9. java程序开发代写(QQ:928900200)

    条件:手机1.2都是安卓智能机,手机1开热点,手机2链接手机1,功能:A手机2通过刷手机网页,登陆手机1设定的页面并下载其手机的指定文件,B手机1控制手机2的流量,当通过的流量多的时候,停止流量的供应

  10. Gradle第二步骤来创建学习Task

    请下载本系列中的以下文章Github演示示例代码: git clone https://github.com/davenkin/gradle-learning.git     Gradle的Proje ...