topPropagation()函数用于阻止当前事件在DOM树上冒泡。

根据DOM事件流机制，在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上，如果这些祖辈元素上也绑定了相应的事件处理函数，就会触发执行这些函数。

使用stopPropagation()函数可以阻止当前事件向祖辈元素的冒泡传递，也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。

该函数只阻止事件向祖辈元素的传播，不会阻止该元素自身绑定的其他事件处理函数的函数。event.stopImmediatePropagation()不仅会阻止事件向祖辈元素的传播，还会阻止该元素绑定的其他(尚未执行的)事件处理函数的执行。

此外，由于live()函数并不是将事件处理函数直接绑定到自己身上，而是"委托"绑定到祖辈元素上，由祖辈元素来触发执行。live()函数会先一次性冒泡到文档的顶部，然后为符合条件的元素触发事件。因此，stopPropagation()函数无法阻止live事件的冒泡。

同样地，delegate()函数也是"委托事件函数"，只有事件冒泡传递到"受委托"的祖辈元素才会被触发执行。因此，stopPropagation()函数无法阻止该元素到"受委托"的祖辈元素之间的事件冒泡。

该函数属于jQuery的Event对象。

语法

eventObject.stopPropagation( )

返回值

stopPropagation()函数没有返回值，也可以说返回值为undefined。

来自：http://www.365mini.com/page/jquery-event-stoppropagation.htm

stopPropagation()阻止事件向父容器传递的更多相关文章

  1. stopPropagation()阻止事件的冒泡传递

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  2. vue子组件使用自定义事件向父组件传递数据

    使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...

  3. uni-app阻止事件向父级冒泡

    在官网找到的就只有这个方法,但是我放在app项目里并不支持,所以就想到vue的阻止事件冒泡的方法,现在分享,免得大家踩坑     <view class="parent" @ ...

  4. JQuery阻止事件冒泡

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...

  5. JQuery阻止事件冒泡---阻止后续代码执行

    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...

  6. jQuery阻止事件冒泡的例子

    下面给给各位朋友稍加整理了一jquery中阻止事件冒泡的一些例子,我们知道JQuery 提供了两种方式来阻止事件冒泡,但我们简单的利用它来做一些应用可能不深入或不理解,下面整理了更详细的方法,有兴趣的 ...

  7. 微信小程序开发 [03] 事件、数据绑定和传递

    1.事件绑定 在微信小程序中,事件的绑定依附于组件,当事件触发时,就会执行事件对应的处理函数. 我们回到前几章中的例子,将index页面调整为首页(app.json中调整pages数组元素的顺序),此 ...

  8. JavaScript事件冒泡机制和阻止事件冒泡及默认事件

    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...

  9. 阻止事件冒泡js jquery

    jQuery之防止冒泡事件 冒泡事件就是点击子节点,会向上触发父节点.祖先节点的点击事件. 以下是html代码部分: <body> <div id="content&quo ...

随机推荐

  1. Android 线程+Handler的使用

    1.介绍 2.线程的使用 (1)启动 (2)执行 3.xml布局 <?xml version="1.0" encoding="utf-8"?> &l ...

  2. 【算法笔记】B1038 统计同成绩学生

    1038 统计同成绩学生 (20 分) 本题要求读入 N 名学生的成绩,将获得某一给定分数的学生人数输出. 输入格式: 输入在第 1 行给出不超过 10​5​​ 的正整数 N,即学生总人数.随后一行给 ...

  3. Python- sort()/sorted()

    Python list内置sort()方法用来排序,也可以用python内置的全局sorted()方法来对可迭代的序列排序生成新的序列. sorted(iterable,key=None,revers ...

  4. UESTC - 1692 注意DP顺序

    #include<iostream> #include<algorithm> #include<cstdio> #include<cstring> #i ...

  5. HDU - 4291 循环节

    还有这种操作? #include<bits/stdc++.h> #define rep(i,j,k) for(register int i=j;i<=k;i++) #define p ...

  6. spark SQL编程

    1.编程实现将 RDD 转换为 DataFrame源文件内容如下(包含 id,name,age): 1,Ella,362,Bob,293,Jack,29 请将数据复制保存到 Linux 系统中,命名为 ...

  7. spark第六篇：Spark Streaming Programming Guide

    预览 Spark Streaming是Spark核心API的扩展,支持高扩展,高吞吐量,实时数据流的容错流处理.数据可以从Kafka,Flume或TCP socket等许多来源获取,并且可以使用复杂的 ...

  8. 4GLTE@NB-IOT

    参考:https://www.cnblogs.com/pangguoming/p/9755916.html NB-IOT特点:在4G基础上发展而来,覆盖广,海量接入,成本低低功耗:不适合应用情况:大数 ...

  9. Angular4+NodeJs+MySQL 入门-01

    有一定的后台开发经验ES6语法.后台没有用框架来,纯自己写.会sql语句 安装NodeJS的安装 从网上下载 https://nodejs.org/en/ 选择自己,我用的是最新版本 Angular ...

  10. 如何发布一个包到npm && 如何使用自己发布的npm包 && 如何更新发布到npm的package && 如何更新当前项目的包？

    如何发布一个包到npm First 在https://www.npmjs.com注册一个账号. Second 编辑好项目,文件大致如下: 其中,gitignore可以如下: .DS_Store nod ...