【前言】
最近在给学生整理面试题,这里简单记录下课堂遗落的一个知识点,即阻止事件冒泡stopImmediatePropagation函数和stopPropagation函数的区别
【主体】
在事件处理程序中,每个事件处理程序中间都会有一个event对象,而这个event对象有两个方法,一个是stopPropagation方法,一个是stopImmediatePropagation方法,两个方法只差一个Immediate,这里就说说这两个方法的区别
1、stopImmediatePropagation方法:
stopImmediatePropagation方法作用在当前节点以及事件链上的所有后续节点上,目的是在执行完当前事件处理程序之后,停止当前节点以及所有后续节点的事件处理程序的运行
2、stopPropagation方法
stopPropagation方法作用在后续节点上,目的在执行完绑定到当前元素上的所有事件处理程序之后,停止执行所有后续节点的事件处理程序
3、区别:
从概念上讲,在调用完stopPropagation函数之后,就会立即停止对后续节点的访问,但是会执行完绑定到当前节点上的所有事件处理程序;而调用stopImmediatePropagation函数之后,除了所有后续节点,绑定到当前元素上的、当前事件处理程序之后的事件处理程序就不会再执行了。
<div id = "div1"> <button id = "button1"></button> </div> var div = document.getElementById("div1"); var btn = document.getElementById("button1"); div.addEventListener("click" , function(){alert("第一次执行");} , true); //1 div.addEventListener("click" , function(){alert("第二次执行");} , true); //2 btn.addEventListener("click" , function(){alert("button 执行");}); //3
在这里,给 1 函数alert后加上stopImmediatePropagation, 那么之后弹出窗口“第一次执行”
但是如果给 1 函数alert后加上stopPropagation , 那么之后会弹出窗口“第一次执行”,“第二次执行”两个窗口
.
相关推荐
stopImmediatePropagation , stopPropagation和preventDefault其他事件选项 事件操作员对throttle和debounce支持 用于在NgZone外部NgZone并且仅在platformBrowser内部绑定的角度事件选项 该模块仅压缩3KB ,因此...
1:阻止合成事件往最外层document上的事件冒泡,用e.nativeEvent.stopImmediatePropagation(); 2: 合成事件间的冒泡,使用 e.stopPropagation(); 3:阻止合成事件,往处理document上的其他原生事件冒泡,需要通过e....
阻止冒泡:1、stopPropagation()对于非IE浏览器。2、cancelBubble属性为true,对于IE浏览器, 而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation(); 代码如下: <style> body { background:...
阻止冒泡:1、stopPropagation()对于非IE浏览器。2、cancelBubble属性为true,对于IE浏览器, 而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation(); <!DOCTYPE html> <html> <head>...
e.stopImmediatePropagation(); obj.state.dragable = true; obj.state.mouseX = e.targetTouches[0].pageX; obj.state.mouseY = e.targetTouches[0].pageY; }); document.addEventListener("touchmove", ...
(Bug) stopImmediatePropagation was not being honoured in live/delegate event handlers (#7217) (Bug) Fixed an issue where host and protocol were not compared case-insensitively when determining ...
(Bug) stopImmediatePropagation was not being honoured in live/delegate event handlers (#7217) (Bug) Fixed an issue where host and protocol were not compared case-insensitively when determining ...
stopImmediatePropagation(), stopPropagation(), eltarget, numtimeStamp, strtype, strwhich } Effects Basics $.show( [ duration [, easing] [, fn] ] ) $.hide( [ duration [, easing] [, fn] ] ) $.toggle( ...
0},a.stopImmediatePropagation=function(){this.immediatePropagationStopped=this.propagationStopped=!0},a.remove=function(){this.removed=!0},a.clone=function(){return new Event(this.type,this.bubbles,...
jquery需要的所有js文件 /*! * jQuery UI 1.8.18 * ... * Dual licensed under the MIT or GPL Version 2 licenses. ... * ... */(function(a,b){function d(b){return!a(b).parents().andSelf().filter(function(){return ...