jQuery中事件对象e的事件冒泡用法示例（事件冒泡与阻止冒泡）

时间：2023-01-25 16:30:31
 <!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&sol;jQuery中，怎么触发input的keypress&sol;keydown&sol;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对象的复制（数组及对象） &period;

    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. javascript 实现des解密加密

    //Paul Tero, July 2001 //http://www.tero.co.uk/des/ // //Optimised for performance with large blocks ...

  2. 第3月第8天 RefCounted PlistBuddy

    1.RefCounted引用计数 class Frame : public RefCounted<Frame> { // ... } http://www.cnblogs.com/dsky ...

  3. centos7安装jdk8

    1.查看是否已经安装了jdk rpm -qa|grep java 表示没有安装jre 如果已经安装请先卸载 2.查看可安装的java环境 yum list java* 3.安装 java-1.8.0- ...

  4. python（5）字符串处理 （sub&comma;replace&comma;find&comma;index&comma;upper&comma;strip，split，sub翻页

    一,sub和replace的用法 re.sub 函数进行以正则表达式为基础的替换工作 re.sub替换到目标字符串中的a,b或者c,并全部替换 另加上sub翻页操作: re.sub('start=\d ...

  5. 天气API整理，返回的数据格式为json对象

    中国天气的API惨遭封杀,不得已更换其他的API使用吧. 这里大部分API来自APP的数据包截取或者反汇编,所以各开发使用者不得用于商业用途,否则后果自负! 1.金山网址导航 来源:http://ww ...

  6. 【Xamarin挖墙脚系列：Xamarin 上台讲述PPT呵呵呵】

    http://pan.baidu.com/s/1kUrwQft

  7. DAY10-万物皆对象-2018-2-2

    许久没有写了,虽然每天都有在学,但是学的东西也少了,后面难度慢慢加大,学习速度也是变慢了.这是许多天积累下来的笔记,从第一次接触对象,到慢慢去了解,现在处于还待深入了解的状态.万物皆对象,那是不是说没 ...

  8. java内部类&colon;成员内部类&comma;静态内部类方法内部类&comma;匿名内部类&lpar;A&rpar;

    package cn.kecheng; /** * 在java中,一个文件可以定义多个类,文件名必须和public 类型的类的类名保持一致.这两个类是平行关系. * 在java中,一个类也可以定义在一 ...

  9. calendar模块

    calendar模块是个日历模块 1  判断是否是闰年 #!/urs/bin/evn python # -*- coding:utf-8 -*- import calendar print(calen ...

  10. CSV文件解析

    CSV(逗号分隔值文件格式)        逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和 ...

相关文章