<!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. Python将纳入高考？

    最近,"Python将纳入高考"的消息,狠狠地刷了朋友圈. 尽管这则消息目前还未得到官方的确认,但人们对于Python的火热关注度,还是引来众程序员热议. 虽然小编资历尚浅,但还是 ...

  2. salesforce零基础学习（八十四）配置篇： 自定义你的home page layout

    当我们进入salesforce系统或者切换app后,默认第一个看到的就是home页面.home页面简单的来说可以包括左侧(narrow component)和右侧(wide component)两部分 ...

  3. 将PDF文件中按页截取,并以流的形势返回给客户端

    #需要用到pyPdf库 from pyPdf import PdfFileWriter,PdfFileReader from django.http import HttpResponse try: ...

  4. java.util.ConcurrentModificationException 异常问题详解

    环境:JDK 1.8.0_111 在Java开发过程中,使用iterator遍历集合的同时对集合进行修改就会出现java.util.ConcurrentModificationException异常, ...

  5. 2016年7月微软MVP申请開始了!

    2016年7月微软MVP申请開始了! CSDN与微软合作,长期为用户提供申请"微软最有价值专家"的平台.希望有兴趣.资历的朋友以及正在朝这个方向努力的朋友能够积极參与. 2016年 ...

  6. android.app.Activity 的介绍

    发现当前Android的资料不是非常多,并且对于Activity的介绍也非常少.所以把官方文档的android.app.Activity的介绍翻译了一下,增加了一些自己的理解.各位假设认为我自己理解的 ...

  7. java基础数据类型包装类

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  8. MyBatis_查询缓存01

    一.查询缓存 查询缓存的使用,主要是为了提高查询访问速度.将用户对同一数据的重复查询过程简单化,不在每次均从数据库中查询获取结果数据,从而提高访问速度. MyBatis的查询缓存机制,根据缓存区的作用 ...

  9. 【python】局部变量和全局变量

  10. HTML5 桌面通知：Notification API

    原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...