egret.Event觸控事件與事件機制
阿新 • • 發佈:2018-11-15
事件機制包含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);