<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. Inno Setup打包添加和去除管理员权限

    原文:Inno Setup打包添加和去除管理员权限 添加管理员权限 1.在[Setup]节点添加 PrivilegesRequired=admin 2.进入安装目录,找到文件SetupLdr.e32, ...

  2. cocoa动态方法决议及消息转发

    假设给一个对象发送不能响应的消息,同一时候又没有进行动态方法决议,又没实现消息转发,那么就会引发以下的crash信息 2014-07-30 15:47:54.434 MethodNotFind[171 ...

  3. 第1次实验——NPC问题(回溯算法、聚类分析)

    题目:八皇后问题,是一个古老而著名的问题,是回溯算法的典型案例.该问题是国际西洋棋棋手马克斯·贝瑟尔于1848年提出:在8X8格的国际象棋上摆放八个皇后,使其不能互相攻击,即随意两个皇后都不能处于同一 ...

  4. evnetlet hub

    hub 是 Eventlet's event loop的主要部分,用于分配I/O 事件 和调度绿色线程. Eventlet 有多种hub实现,现支持一下几种: epoll poll selects p ...

  5. PHP Html 弹窗，本页面弹窗子页面

    echo '<script type=text/javascript>window.open("","name1","width=100, ...

  6. 准备踏入IT编程的学子们,你们第一门编程语言选谁？ Are You Ready? Go!

    Are You Ready? Go! ——第一门编程语言选谁? 金旭亮 说明: 这篇文章是专门针对大学低年级学生(和其他软件开发初学者)写的,如果你己经是研究生或本科高年级学生,请将这篇文章转发给你的 ...

  7. 边坡优化主题5——bzoj 1096 [ZJOI2007]仓库建设 解决问题的方法

    [原标题] 1096: [ZJOI2007]仓库建设 Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 1998  Solved: 816 [id=10 ...

  8. Java实现BASE64编解码器

    Java实现BASE64编解码器 笔者:chszs,转载注明.博客首页:http://blog.csdn.net/chszs BASE64和其它类似的编码算法通经常使用于转换二进制数据为文本数据,其目 ...

  9. android插件化-apkplug框架启动-02

    本文章基于apkplug v1.6.7 版本号编写,最新方式以官网最新消息为准 一 apkplug框架所须要的库文件(宿主) 可从http://git.oschina.net/plug/apkplug ...

  10. Basic脚本解释器移植到STM32

    本文来自http://blog.csdn.net/hellogv/ .引用必须注明出处! 上次讲了LUA移植到STM32.这次讲讲Basic脚本解释器移植到STM32. 在STM32上跑Basic脚本 ...