1. 程式人生 > >egret.Event觸控事件與事件機制

egret.Event觸控事件與事件機制

事件機制包含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);