stopImmediatePropagation和stopPropagation (事件、防止侦听)
参考:
ActionScript 3.0 Step By Step系列(六):学对象事件模型,从点击按扭开始
一、事件模型
egret中的事件模型和flash是一样的,但是年代太久了,都忘了。
之前貌似是看殿堂之路还是哪本书,记不清了。
二、测试
下面测试一下,当有3个层级的对象监听事件时,事件触发的顺序。
创建3个方块,分别为out、mid、inner。 层级关系为out最外层,mid中间层,inner最里层。
class HomeScene extends eui.Component{
private out:eui.Rect;
private mid:eui.Rect;
private inner:eui.Rect; public constructor() {
super();
this.skinName = "HomeSceneSkin";
} protected childrenCreated(){
this.out = new eui.Rect(300,300,0xff0000);
this.out.touchChildren = true;
this.addChild(this.out); this.mid = new eui.Rect(200,200,0x00ff00);
this.mid.touchChildren = true;
this.out.addChild(this.mid); this.inner = new eui.Rect(100,100, 0x0000ff);
this.inner.touchChildren = true;
this.mid.addChild(this.inner); this.out.addEventListener(egret.TouchEvent.TOUCH_TAP, (e:egret.TouchEvent)=>{
console.log("out");
},this); this.mid.addEventListener(egret.TouchEvent.TOUCH_TAP, (e:egret.TouchEvent)=>{
console.log("mid");
},this); this.inner.addEventListener(egret.TouchEvent.TOUCH_TAP, (e:egret.TouchEvent)=>{
console.log("inner");
},this); this.inner.addEventListener(egret.TouchEvent.TOUCH_TAP, (e:egret.TouchEvent)=>{
console.log("inner2");
},this);
}
}
点击inner,输出
点击mid,输出
点击out,输出
总结:
从测试结果来看
捕获阶段:点击inner时,进入捕获阶段,从out->mid->inner
目标阶段:当找到inner时,第一个输出"inner"
冒泡阶段:在冒泡阶段时,会从inner->mid->out顺序冒泡,所以依次输出的是"mid"、"out"
所以测试结果还是符合事件模型的。
三、stopImmediatePropagation
防止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理
在inner中增加stopImmediatePropagation
this.inner.addEventListener(egret.TouchEvent.TOUCH_TAP, (e:egret.TouchEvent)=>{
console.log("inner");
e.stopImmediatePropagation();
},this);
点击inner,输出
可见防止了当前节点inner2和后继节点mid、out的节点事件侦听
四、stopPropagation
防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理
this.inner.addEventListener(egret.TouchEvent.TOUCH_TAP, (e:egret.TouchEvent)=>{
console.log("inner");
e.stopPropagation();
},this);
点击inner,输出
可见防止了后继节点mid和out的事件侦听
五、target和currentTarget
this.out.addEventListener(egret.TouchEvent.TOUCH_TAP, (e:egret.TouchEvent)=>{
console.log("out");
console.log(e.target.width); //100
console.log(e.currentTarget.width); //300
},this);
点击inner,输出
可见目标阶段对象e.target是inner,最终冒泡的对象e.currentTarget是out
stopImmediatePropagation和stopPropagation (事件、防止侦听)的更多相关文章
- 浏览器标签tab窗口切换时事件状态侦听
做到 是大屏项目,用的websocket,在浏览器切换标签窗口后,过了一段时间回来,页面会非常卡,所以想页面切回来的时候刷新页面,找到了这个方法,这是原来的例子.这段代码可以自己复制去做下测试 var ...
- Laravel 事件侦听的几个方法 [Trait, Model boot(), Observer Class]
1 Trait 1.1 可以在 Trait 中定义一个静态的 bootFooBar() 方法,注:FooBar 是你的 Trait 名称 namespace App\Traits; use App\A ...
- JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底!
一.事件流 我们通过下面一个实例,进行说明. <body> <h1>Event Flow</h1> <ul id="nav"> &l ...
- javascript中事件总结&通用的事件侦听器函数封装&事件委托
前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...
- Unity3D 自定义事件(事件侦听与事件触发)
先来看下效果图,图中点击 Cube(EventDispatcher),Sphere(EventListener)以及 Capsule(EventListener)会做出相应的变化,例子中的对象相互之间 ...
- js事件流、事件处理程序/事件侦听器
1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 ...
- Android事件侦听器回调方法浅谈
http://developer.51cto.com/art/201001/180846.htm Android事件侦听器作为视图View类的接口,其中包含有不少回调方法,比如:onClick():o ...
- 异常将上下文初始化事件发送到类的侦听器实例.[org.springframework.web.context.ContextLoaderListener] org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'sessionFactory' defined in class p
严重: 异常将上下文初始化事件发送到类的侦听器实例.[org.springframework.web.context.ContextLoaderListener]org.springframework ...
- vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面
3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...
随机推荐
- 猫猫学iOS之小知识iOS启动动画_Launch Screen的运用
猫猫分享,必须精品 原创文章.欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243? viewmode=contents 看下效果吧 比如新浪微博的 ...
- extJS 中 ext.data 介绍
ext.data 最主要的功能是获取和组织数据结构,并和特定控件联系起来,于是,Ext.data成了数据的来源,负责显示数据. Ext.data在命名空间中定义了一系列store.reader和pro ...
- mysql 错误代码:1118解决方法
错误描述: 错误代码: 1118Row size too large. The maximum row size for the used table type, not counting BLOBs ...
- mysql触发器应用和创建表错误代码: 1118 Row size too large. 解决
1.针对数据库查询问题的方便,可以建立重要表的log备份记录表,在主表的添加,修改,删除添加触发器,修改触发器增加触发字段的点,限制条件. 数据库log表查问题比从线上多台服务器上下载日志文件相对方便 ...
- 设计模式之初识IoC/DI(六)
本篇和大家一起学习IoC和DI即控制反转和依赖注入. 当然听上去这词语非常的专业,真不知道是怎么组出来的,看上去难归看上去难,但稍微理解一下也就这么回事了. 首先我们要明白IoC/DI干嘛用的,不然别 ...
- linux 安装lnmp
wget -c http://soft.vpser.net/lnmp/lnmp1.4.tar.gz && tar zxf lnmp1.4.tar.gz && cd ln ...
- linux环境安装nagiosgraph将nagios的性能数据绘制成动态图表?
需求描述: 在安装完成nagios之后,比如有监控磁盘负载信息的,连接数的,进程数的,可以通过安装nagiosgraph软件, 将nagios的性能数据绘制成图表,可以看到一段时间内数据的变化 环境说 ...
- Java使用for循环输出杨辉三角
杨辉三角形由数字排列,可以把它看做一个数字表,其基本特性是两侧数值均为1,其他位置的数值是其正上方的数字与左上角数值之和.编写程序,使用for循环输出包括10行在内的杨辉三角形. 思路是创建一个整型二 ...
- Hibernate_day02讲义_使用Hibernate完成CRM客户管理中查询所有客户的操作
- C语言对文件的基本操作
在C语言中,对于文件的操作是利用FILE结构体进行的. 几个常用的操作文件函数简介 1:打开文件 FILE *fopen( const char *filename, const char *mode ...