egret.Event触摸事件与事件机制

最新推荐文章于 2020-06-09 15:22:16 发布

原创最新推荐文章于 2020-06-09 15:22:16 发布 · 6.8k 阅读

2 ·

CC 4.0 BY-SA版权

游戏开发专栏收录该内容

61 篇文章

订阅专栏

本文详细介绍了Egret引擎中的触摸事件机制，包括事件的注册、监听及取消流程，并通过示例代码展示了如何在Scroller组件上实现触摸事件的监听。

事件机制包含4个步骤：注册侦听器，发送事件，侦听事件，移除侦听器。这四个步骤是按照顺序来执行的。

egret.TouchEvent.TOUCH_TAP                 //触摸事件

//注册侦听函数的定义
public addEventListener(type:string, listener:Function, thisObject:any, useCapture:boolean = false, priority:number = 0)
//侦听器的优先级
public addEventListener(type:string, listener:Function, thisObject:any, useCapture:boolean = false, priority:number = 0)

事件发送者.addEventListener(事件类型, 侦听器, this);            //注册侦听器
事件发送者.removeEventListener(事件类型, 侦听器, this);         //删除侦听器
事件发送者.hasEventListener(事件类型);                         //检查侦听器

以下来自官方文档
TouchEvent 是一个常用的功能，用于监听触摸事件的不同阶段。一个点击的流程一般会触发3个 touch 事件：TouchBegin 触摸开始，TouchEnd 触摸结束，TouchTap 点击。

在 Egret 版本 3.0.1 中，我们新增了一个 TouchCancel 事件，顾名思义就是取消触摸。这个功能目前主要用于 EUI 中，比如 Scroller 滚动列表，当你的手点中它后，首先抛出一个 TouchBegin，如果此时没有滚动，直接离开屏幕，那么还是原来标准的流程，抛出 TouchEnd 和 TouchTap。但是当你滚动它以后，则会抛出一个 TouchCancel 事件，而后续的 TouchEnd 和 TouchTap 事件就不会被触发了。

var scroller = new eui.Scroller();
var list = new eui.List();  
list.itemRendererSkinName = `
        <e:Skin states="up,down,disabled" minHeight="50" minWidth="100" xmlns:e="http://ns.egret.com/eui"> <e:Image width="100%" height="100%" scale9Grid="1,3,8,8" alpha.disabled="0.5"
                     source="resource/button_up.png"
                     source.down="resource/button_down.png"/> <e:Label text="{data}" top="8" bottom="8" left="8" right="8"
                     textColor="0xFFFFFF" verticalAlign="middle" textAlign="center"/> </e:Skin>`
var ac = new eui.ArrayCollection([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
list.dataProvider = ac;
scroller.viewport = list;
scroller.height = 200;
this.addChild(scroller);

scroller.addEventListener(egret.TouchEvent.TOUCH_BEGIN,()=>{console.log("111 Scroller Begin")},this);
list.addEventListener(egret.TouchEvent.TOUCH_BEGIN,()=>{console.log("111 List Begin")},this);

scroller.addEventListener(egret.TouchEvent.TOUCH_END,()=>{console.log("222 Scroller END")},this);
list.addEventListener(egret.TouchEvent.TOUCH_END,()=>{console.log("222 List END")},this);

scroller.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{console.log("33 Scroller Tap")},this);
list.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{console.log("33 List Tap")},this);

scroller.addEventListener(egret.TouchEvent.TOUCH_CANCEL,()=>{console.log("44 Scroller cancel")},this);
list.addEventListener(egret.TouchEvent.TOUCH_CANCEL,()=>{console.log("44 List cancel")},this);