<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. VS上的WebService入门贴

    由于项目需要,最近要熟悉一下通过IIS发布WebService.首先熟悉一下使用VS来创建webservice并且调用它. //------------------------------------ ...

  2. dsbskrhkme看么哦么

    http://pan.baidu.com/share/link?shareid=3011665141&uk=338692646&third=15                http ...

  3. Flash Android ANE打包之基本流程

    搭建环境这里就不详细说明了 一.Android本地库编写 1.从Flash Air SDK中提取需要的jar包 Android下需要的jar包在Flash Air SDK/lib/android目录下 ...

  4. SQL Server 字段类型 decimal(18,6)小数点前是几位？记一次数据库SP的BUG处理

    原文:SQL Server 字段类型 decimal(18,6)小数点前是几位?记一次数据库SP的BUG处理 SQL Server 字段类型 decimal(18,6)小数点前是几位? 不可否认,这是 ...

  5. SSH是什么？Linux如何修改SSH端口号？

    通过SSH连接可以远程管理Linux等设备,默认linuxssh端口是22端口,如何修改SSH默认端口,如何增加SSH端口呢?,下面小编给大家演示一下   工具/原料 Xshell   putty 等 ...

  6. BZOJ 1038 ZJOI2008 瞭望塔 半平面交

    题目大意及模拟退火题解:见 http://blog.csdn.net/popoqqq/article/details/39340759 这次用半平面交写了一遍--求出半平面交之后.枚举原图和半平面交的 ...

  7. 【HDU】5248-序列变换（贪心+二分）

    二分枚举长度改变的长度即可了 #include<cstdio> #include<cstring> #include<algorithm> using namesp ...

  8. Html5 Device API详解

    三.四月曾学习过html5相关知识,并就html5 device api做过一次讲解 课程时长一个小时,预期达到level 200目标,即知道html5 device api是什么,且知道怎么实现 面 ...

  9. 三星Samsung 4.4.2该负责人制度，简化名单

    installed uninstalled AccessControl.apk AllshareControlShare.apk AirMotionTryActually.apk AllshareFi ...

  10. MVC区域 vs2013 mvc 搭建基架项

    http://www.it165.net/pro/html/201404/12822.html