<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. Struts2 拦截器具体配置过程

    拦截器差点儿遍布每个程序中,所以贴出拦截器配置的具体过程,希望可以帮到大家. Struts2 拦截器具体配置过程 <interceptors> <!-- 先定义拦截器 --> ...

  2. 使用NFS安装oracle软件

    昨天.使用openfiler创建nas存储系统,安装oracle软件,在所有正面最好,要创建一个数据库时报ora错,原来使用nfs安装oracle数据库,mount选项有特殊要求,如以下.以备查: R ...

  3. OpenStack镜像管理3

    第三部分 OpenStack镜像管理 一.简介 很多源都有为OpenStack已经编译好的各种镜像了,您可以直接下载并通过使用这些镜像来熟悉OpenStack. 不过如果是为生产环境进行部署的话,您一 ...

  4. Learning Cocos2d-x for WP8（5）——详解Menu菜单

    原文:Learning Cocos2d-x for WP8(5)--详解Menu菜单 C#(wp7)兄弟篇Learning Cocos2d-x for XNA(5)——详解Menu菜单 菜单是游戏必不 ...

  5. iOS UITableView的Section Footer加入button

    郝萌主倾心贡献,尊重作者的劳动成果.请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠.支持郝萌主,捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 在处理UI ...

  6. android app崩溃日志收集以及上传

    源代码获取请到github:https://github.com/DrJia/AndroidLogCollector 已经做成sdk的形式,源代码已公开,源代码看不懂的请自行google. 假设想定制 ...

  7. Automatically generate serial number in abap

    流水号的产生:   在ABAP开发中,很多地方都需要按照自己的规则生成流水号,把这些流水号保存进透明表,作为唯一标示. 一. 系统中设定流水号 使用T-Code SNRO来创建一个流水号标识对象. 输 ...

  8. 【从翻译mos文章】在OGG (Oracle GoldenGate) 正在使用SCHEMATRANDATA如果，需要额外的db patch

    在OGG (Oracle GoldenGate) 正在使用SCHEMATRANDATA如果.需要额外的db patch 参考原始: Patches needed to support SCHEMATR ...

  9. POJ1300（欧拉回路）

    Door Man Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 2139   Accepted: 858 Descripti ...

  10. HDU 3036 Escape 网格图多人逃生 网络流||二分匹配 建图技巧

    题意: 每一个' . '有一个姑娘, E是出口,'.'是空地 , 'X' 是墙. 每秒钟每一个姑娘能够走一步(上下左右) 每秒钟每一个出口仅仅能出去一个人 给定n*m的地图, 时限T 问全部姑娘是否能 ...