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 ...
随机推荐
- php创建文件夹
$dir = iconv("UTF-8", "GBK", "Public/bookcover"); if (!file_exists($di ...
- bootstrapValidator 表单验证
官网下载地址:http://plugins.jquery.com/bootstrapValidator/ html代码 <!DOCTYPE html> <html> <h ...
- Hibernate的七种映射关系之七种关联映射(二)
继续上篇博客 七.Hibernate双向一对多关联映射:让多的一端来维护关系. 主要是解决一对多单向关联的缺陷,而不是需求驱动的. 1.在Student.java实体类里添加Classes引用.pri ...
- GCT之数学公式(平面解析几何)
- Android布局学习——android:gravity和android:layout_gravity的区别
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
- python05 - 迭代器,生成器,装饰器
迭代器 迭代器就是访问集合元素的一种方式,迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问一遍后结束. 迭代器很大的特点: 只能往前迭代,不能够回退,也不能随机访问其中一个元素,只能通过__ ...
- Android程序中有多个Activity时的可全部退出方法
下面是代码.该方法的原理是用一个list记录每次启动的acitivity,在退出时候循环退出改list中保存的acitivity,这样就做到了所有的acitivity完美退出. 先写一个类继承Ap ...
- Mysql 大量数据导入
今天试图用heidisql 导入一个150M的数据文件(.sql), 结果报out of memory 错误.在网上搜了很多案例,都没能解决问题.我甚至怀疑是mysql 的default的内存设置的太 ...
- Python的Beautiful Soup简单使用
Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据 Beautiful Soup提供一些简单的.python式的函数用来处理导航.搜索.修改分析树等功能 它是一个工具箱, ...
- vs2012更改默认开发环境
1.在菜单栏里找到“Tools”(工具),选择下面的“Import and Export Settings”(导入和导出设置),如图1所示: 图1 2.弹出如下界面,按提示选择你需要 ...