<!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>事件冒泡与阻止冒泡</title>

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

 </head>

 <body>

 <script type="text/javascript">

 $(function () {

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

 alert("我是li");

 })

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

 alert("我是ul");

 e.stopPropagation(); //e.stopPropagation();就是阻止冒泡，如果不写这句，在弹出 “我是li”后就会弹出“我是ul”，然后就会弹出“我是div”。在这里添加了e.stopPropagation();之后，“我是div”就不会弹出来了。因为已经被阻止了。其实这句也可也用 return false来替代

 })

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

 alert("我是div");

 })

 })

 </script>

 <div>

 <ul>

 <!-- li在ul里，ul在div中，只要点击了li，也就是点击了ul,也就是点击了div。在上面的函数中，先弹出 “我是li”然后弹出“我是ul”，最后弹出“我是div” 一层一层的冒泡，而阻止冒泡的方式就是调用 事件的对象来调用stopPropagation()方法。这个事件的对象就是函数的参数 e 这个e的名字可以随便取-->

 <li>请点击我</li>

 </ul>

 </div>

 </body>

 </html>

jQuery中事件对象e的事件冒泡用法示例（事件冒泡与阻止冒泡）的更多相关文章

  1. JQuery中的对象和事件

    一:JQuery 对象和 Dom 对象 在使用 JQuery 过程中,我们一般(也是绝大多数情况下,除非我们使用了第二个框架)只有两类对象,即:JQuery 对象和 Dom 对象.Dom 对象指的是普 ...

  2. jQuery中异步操作对象Deferred

    以下介绍一下jQuery中Deferred对象的使用: 1. 通过$.Deferred生成一个deferredObj对象; 2. deferredObj.done()指定操作成功时的回调函数; 3. ...

  3. jquery中关于对象类型的判断原理

    class2type[ core_toString.call(obj) ] jquery中关于对象类型的判断原理 jquery源码中关于类型判断的工具函数为type,调用方法为$.type()或者jQ ...

  4. jquery中event对象属性与方法小结

    JQuery事件中的Event属性是经常性的被忽略的.大多数时间你的确不怎么用它,但有些时候它还是它还是有作用的.如获知触发时用户的环境(是否按了shift etc).每个浏览器对event都有不同的 ...

  5. 在JS/jQuery中，怎么触发input的keypress/keydown/keyup事件？

    怎么触发keypress/keydown/keyup事件? 问题: 1.在之前的写的input后面添加了搜索按钮 2.input只有keyup事件,如下: $("#desktop_folde ...

  6. jQuery中json对象与json字符串互换

    json字符串转json对象:jQuery.parseJSON(jsonStr); json对象转json字符串:JSON.stringify(jsonObj); 根据“|”把字符串变成数组.spli ...

  7. jQuery中json对象的复制（数组及对象） .

    1.jQuery自带的$.map方式: $.map(json, function (n) { return n; }); 这种方式原来用于复制数组还可以,今天用它复制数组中的某一条记录,发现字段名称丢 ...

  8. jQuery中deferred对象的使用（二）

    接上一回的内容,漏了一个always()方法,参数也是回调函数,与done和fail不同的是,无论任何情况都执行always方法中的回调. deferred对象的使用(二) deferred对象不光可 ...

  9. jQuery中deferred对象的使用（一）

    在jquery1.5之后的版本中,加入了一个deferred对象,也就是延迟对象,用来处理未来某一时间点发生的回调函数.同时,还改写了ajax方法,现在的ajax方法返回的是一个deferred对象. ...

随机推荐

  1. 51Nod--1011最大公约数GCD

    1011 最大公约数GCD 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 输入2个正整数A,B,求A与B的最大公约数. Input 2个数A,B,中间用 ...

  2. php计算多个集合的笛卡尔积实例详解

    笛卡尔积 笛卡尔积是指在数学中,两个集合X和Y的笛卡尔积(Cartesian product),又称直积,表示为X*Y,第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员. 假设集合A ...

  3. js内置构造函数属性修改问题

    在学习js原型时遇到一个问题,Array,Object等内置构造函数部分属性无法修改,我猜测可能是因为浏览器实现的原因造成的. 1.修改name属性无效. <script type=" ...

  4. 剑指Offer_12_矩阵中的路径(参考问题:马踏棋盘)

    题目描述  请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径.路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上,向下移动一个格子.如果一条路径经过了矩阵 ...

  5. Express4.x API (四)：Router (译)

    Express4.x API 译文 系列文章 Express4.x API (一):application (译) -- 进行 Express4.x API (二):request (译) -- 完成 ...

  6. Android View动画效果—透明效果，旋转效果（二）

    一:动画效果 方法一:动画效果用AlphaAnimation类.直接加入 AlphaAnimation aa = new AlphaAnimation(0,1); //设置透明度 aa.setDura ...

  7. MVC(二)

    一: 在新接触MVC的时候可以先使用VS建一个MVC项目(不是空项目哟),MVC特别人性化的建一个示例,展示了MVC项目的基本组成.如下: App_Data 数据库文件,需根据数据库变动而变更. Ap ...

  8. Linux基础：用tcpdump抓包

    简介 网络数据包截获分析工具.支持针对网络层.协议.主机.网络或端口的过滤.并提供and.or.not等逻辑语句帮助去除无用的信息. tcpdump - dump traffic on a netwo ...

  9. springboot命令启动

    gradle打jar包命令 jar { doFirst { def jarFiles = ''; configurations.compile.collect { jarFiles += it.nam ...

  10. nginx转发tomcat请求转成https后页面不能下载apk文件而是直接打开

    访问域名下面的apk文件 https://xxxx/xxx.apk 浏览器没有下载而是直接打开了文件 没有找到问题原因,可能是https的原因,要是用http就可以下载,转发https就有问题 后来是 ...