stopImmediatePropagation()函数用于阻止剩余的事件处理函数的执行,并防止当前事件在DOM树上冒泡

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

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

此外,与event.stopPropagation()函数相比,stopImmediatePropagation()函数还会阻止该元素剩余的其他事件处理函数的执行。

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

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

该函数属于jQuery的Event对象

语法

jQuery 1.3 新增该函数。

eventObject.stopImmediatePropagation( )

返回值

stopImmediatePropagation()函数没有返回值,也可以说返回值为undefined

示例&说明

请参考下面这段HTML代码:

<p>段落文本内容
    <input type="button" value="点击" />
</p>

event.stopImmediatePropagation()函数相关的jQuery示例代码如下:

// 为所有p元素绑定click事件
$("p").click( function(event){
    alert("p-click");
} ); // 为所有button元素的click事件绑定第一个事件处理函数
$(":button").click( function(event){
    alert("button-click-1");
   
    // 阻止事件冒泡到DOM树上,并阻止剩余的事件处理函数的执行
    // 只执行button-click-1,如果注释掉该行,将执行button-click-1、button-click-2和p-click
    // 如果换成event.stopPropagation() 将执行button-click-1和button-click-2
    event.stopImmediatePropagation();
} ); // 为所有button元素的click事件绑定第二个事件处理函数
$(":button").click( function(event){
    alert("button-click-2");
} );

该函数无法阻止live()函数的事件传递,也无法阻止delegate()函数的选择元素到"受委托"元素之间的事件传递。相关示例请参考event.stopPropagation()函数文档中最后部分的示例代码。

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

jQuery Event.stopImmediatePropagation() 函数详解的更多相关文章

  1. jQuery Event.stopPropagation() 函数详解

    stopPropagation()函数用于阻止当前事件在DOM树上冒泡. 根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上,如果这些祖辈元素上也绑定了相应的事件处理函 ...

  2. jQuery Event.which 属性详解

    jQuery Event.which 属性详解 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮. 对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮. which属性对 ...

  3. Jquery之each函数详解

    最近项目被each函数坑惨了,想来还是好好整理下关于each函数的方方面面,一来方便自己查阅,二来为读者提供经验和教训,废话不多说,来看看Each函数到底是怎么坑人的. 一. 全局jQuery.eac ...

  4. jQuery.fn.extend() 函数详解

    jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). jQuery.fn是jQuery的原型对象,其extend()方法用于为jQuery的原型 ...

  5. JQuery中on()函数详解

    JQuery API中定义的on方法,专业名词很多,读起来并不是那么容易,而对于开发人员知道函数怎么使用就可以了.本文将JQuery的说明翻译如下: on(events,[selector],[dat ...

  6. jquery ajax error函数详解

    代码:$(document).ready(function() {            jQuery("#clearCac").click(function() {        ...

  7. jQuery Event.delegateTarget 属性详解

    // 为id为element的元素中的所有span元素绑定click事件 $("#element").on( "click", "span" ...

  8. jQuery.attr() 函数详解

    一,jQuery.attr()  函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...

  9. jQuery.ready() 函数详解

    jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...

随机推荐

  1. [BZOJ 5415] 归程

    一棵KrusKal重构树,然而我数组开小了,忘记清空一个标记 洛谷传送门 BZOJ传送门 ......好像成权限题了Orz 回顾我们用KrusKal做生成树的时候,我们将边排序后连通各个连通块,那么边 ...

  2. windows系统如何校验MD5

    需要首先安装openssl软件. 若安装了git for windows,则默认会带有openssl,不需要单独安装了. 打开git bash控制台,执行如下命令即可—— openssl md5 pa ...

  3. 洛谷 P4093 [HEOI2016/TJOI2016]序列(Cdq+dp)

    题面 luogu 题解 \(Cdq分治+dp\) \(mx[i],mn[i]\)分别表示第\(i\)位最大,最小能取到多少 那么有 \(j < i\) \(mx[j] \le a[i]\) \( ...

  4. BZOJ - 3757 树上莫队解决离线路径问题 & 学习心得

    题意:给你一棵树,求u,v最短路径的XXX(本题是统计权值种类) 今天课上摸鱼学了一种有意思的处理路径方式(其实是链式块状树翻车了看别的),据说实际运行跑的比XX记者还快 大概就是像序列莫队那样 首先 ...

  5. PhpExcel中文帮助手册|PhpExcel使用方法 ( 后面有部分没有显示出来 可以编辑中看到!!)

    下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...

  6. 【记录】adb连不上手机

    1.\用户\.android文件夹下新建adb_usb.ini,内容为手机的VID值,如0x9BB5 2.重启adb adb kill-server adb start-server adb devi ...

  7. 安装配置flutter环境

    flutter 的中文文档 https://flutterchina.club/get-started/install/ github 地址 https://github.com/flutter/fl ...

  8. Web API 解决跨域问题

    一.跨域问题的由来 同源策略:出于安全考虑,浏览器会限制脚本中发起的跨站请求,浏览器要求JavaScript或Cookie只能访问同域下的内容. 正是由于这个原因,我们不同项目之间的调用就会被浏览器阻 ...

  9. PIE SDK波谱运算

    1.算法功能简介 波谱运算(Spectral Math)是一种灵活的波谱处理工具,可以用数学表达式或IDL程序对波谱曲线(以及选择的多波段图像)进行处理.波谱曲线可以来自一幅多波段图像的Z剖面.波谱库 ...

  10. js的apply和call

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...