`
luhantu
  • 浏览: 204279 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

stopImmediatePropagation&stopPropagation 区别

    博客分类:
  • AS3
 
阅读更多

stopImmediatePropagation 与 stopPropagation 不同之处 请仔细查看加粗的文字并结合图例理解。

 

 

stopImmediatePropagation 防止对事件流中当前节点和所有后续节点中的事件侦听器进行处理。此方法会立即生效,并且会影响当前节点中的事件侦听器。

 

stopPropagation  防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理。此方法不会影响当前节点 (currentTarget) 中的任何事件侦听器。

 

测试代码:

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600" 
			   initialize="application1_initializeHandler(event)">
	
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			protected function application1_initializeHandler(event:FlexEvent):void
			{
				btn.addEventListener(MouseEvent.CLICK,handler1);
				btn.addEventListener(MouseEvent.CLICK,handler2,false,1);
				group.addEventListener(MouseEvent.CLICK,handler3);
				this.addEventListener(MouseEvent.CLICK,handler4);
			}
			
			private function handler1(event:MouseEvent):void
			{
				trace("btn priority 0 handler");
				event.stopPropagation();
				
			}
			
			private function handler2(event:Event):void
			{
				trace("btn priority 1 handler");
			}
			
			private function handler3(event:Event):void
			{
				trace("group handler");
			}
			
			
			private function handler4(event:Event):void
			{
				trace("app handler");
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:Group id="group">
		<s:Button label="Click" id="btn"/>
	</s:Group>
</s:Application>

 

event.stopPropagation(),结果:

btn priority 1 handler

btn priority 0 handler

 

event.stopImmediatePropagation (),结果:

btn priority 1 handler

  • 大小: 33.1 KB
0
0
分享到:
评论

相关推荐

    ng-event-options:在角度模板中启用事件选项(捕获,被动,...)

    stopImmediatePropagation , stopPropagation和preventDefault其他事件选项 事件操作员对throttle和debounce支持 用于在NgZone外部NgZone并且仅在platformBrowser内部绑定的角度事件选项 该模块仅压缩3KB ,因此...

    JavaScript中使用stopPropagation函数停止事件传播例子

    如果你想完全取消事件的处理,应该使用`event.stopImmediatePropagation()`,这样可以防止当前元素上其他监听相同事件的处理函数被执行。 了解并熟练运用`event.stopPropagation()`对于编写高性能、低耦合的...

    javascript阻止事件冒泡的一种方法

    阻止事件冒泡的方法主要有两种:`event.stopPropagation()` 和 `event.stopImmediatePropagation()`。这两种方法在不同的场景下有不同的应用。 1. `event.stopPropagation()` 这个方法可以阻止事件继续在DOM树中...

    javascript防止事件传播

    例如,在事件处理函数中调用`event.stopPropagation()`,可以确保事件不会影响到任何父元素。 ```javascript element.addEventListener('click', function(event) { event.stopPropagation(); // 其他代码 }); ``...

    js实现的点击div区域外隐藏div区域

    阻止冒泡:1、stopPropagation()对于非IE浏览器。2、cancelBubble属性为true,对于IE浏览器, 而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation(); &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;...

    jquery阻止事件冒泡

    除了`stopPropagation()`,jQuery还提供了`event.stopImmediatePropagation()`方法,它不仅阻止当前事件的冒泡,还会停止同一事件在同一元素上其他事件处理程序的执行。如果一个元素有多个相同的事件监听器,这会...

    JQuery 提供了两种方式来阻止事件冒泡.rar

    例如,如果你在一个子元素上有一个事件监听器,并且你希望该事件只在此元素上执行,而不是影响到其父元素,那么就可以在事件处理函数中使用`event.stopPropagation()`。这样,事件就不会被父元素接收到,从而实现了...

    jQuery阻止同类型事件小结

    stopImmediatePropagation方法阻止同一个元素上的其他事件监听器被触发,而stopPropagation方法只阻止事件继续传播到其他元素,不影响同一个元素上的其他事件监听器。 上述内容主要是针对原文件中提供的HTML和...

    tweenjs.min.js文件

    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,...

    javaScript事件学习小结(四)event的公共成员(属性和方法)

    currentTarget和target属性帮助我们区分事件触发和处理的上下文,type属性允许我们以一种高效的方式处理多种事件,而stopPropagation()和stopImmediatePropagation()提供了灵活的事件处理控制手段。掌握这些基础知识...

    DOM 事件的深入浅出(二)

    这个方法与stopPropagation方法相似,都是用来阻止事件传播的,但stopImmediatePropagation方法更加彻底。除了阻止事件冒泡外,它还能阻止当前元素上的其它同类型事件处理函数的执行。 ```javascript var go = ...

    vue面试题资源最新高频

    - `.self`:只允许事件在当前元素上触发,不会影响到子元素,即`event.stopPropagation()`和`event.stopImmediatePropagation()`的组合。 - `.once`:事件只触发一次,之后会自动解绑,确保事件监听器只执行一次。...

    jquery阻止后续事件只执行第一个事件

    如果你想要完全取消事件的处理,包括当前处理函数剩余的部分,可以使用`event.stopImmediatePropagation()`方法。 此外,还有一种情况可能与`event.stopPropagation()`混淆,那就是`event.preventDefault()`。这个...

    阻止浏览器的默认事件和冒泡

    - **使用`event.stopImmediatePropagation()`**:这个方法不仅阻止了事件向上冒泡,还阻止了当前元素上后续注册的事件处理程序的执行。 ```javascript function handleEvent(event) { event....

    JQuery中DOM事件冒泡实例分析

    总结来说,在JQuery中处理DOM事件冒泡时,要熟悉事件对象的使用、stopPropagation()方法来停止事件冒泡、preventDefault()方法来阻止默认行为以及stopImmediatePropagation()方法来阻止事件继续传播到其他事件处理器...

    浅析return false的正确使用

    本文将深入探讨何时以及如何正确地阻止浏览器的默认行为,以及`return false`与`event.preventDefault()`、`event.stopPropagation()`和`event.stopImmediatePropagation()`之间的区别。 首先,`return false`在...

    JS冒泡事件与事件捕获实例详解

    在事件捕获的阶段,同样可以在事件处理函数中调用event.stopPropagation()方法来停止事件继续向下传播,但更多情况下开发者会使用event.stopImmediatePropagation()来阻止同一层级中其他事件监听器的执行。...

    事件冒泡

    此外,`event.stopImmediatePropagation()`还可以阻止同一元素上其他事件处理器的执行。 关于标签"源码",这可能提示我们去查看和理解事件冒泡的底层实现。在浏览器的源码中,事件处理机制是由DOM标准定义的,不同...

    自己面试使用的react面试题不轻易分享出来!(已面试成功).pdf

    合成事件提供了与原生事件相似的API,但不完全相同,如`event.preventDefault()`用于阻止默认行为,而`event.stopPropagation()`在React中并不阻止冒泡,应使用`event.stopImmediatePropagation()`来阻止事件进一步...

Global site tag (gtag.js) - Google Analytics