COCOS CREATOR(TS)之按鈕事件

一 : 前景介紹

為cc.Button添加事件的方法有很多種 , 本篇只講解使用cc.Component.EventHandler的方法.因為此方案有一個最大的有點 : 可以獲得cc.Event.EventTouch.但是此方案,相比如控件拖動方案要復雜一些,所以給出此Blog予以詳解

二 : 詳解

Ⅰ: 構建cc.Component.EventHandler對象

export class ClickEvent2CreatTool{
    private static _instance : ClickEvent2CreatTool = null;
    public static get Instance() : ClickEvent2CreatTool{
        if( !ClickEvent2CreatTool._instance ){
            ClickEvent2CreatTool._instance = new ClickEvent2CreatTool();
        }
        return ClickEvent2CreatTool._instance;
    }

    public create( $node : cc.Node , $component : string , $handler : string , $param : any ) : cc.Component.EventHandler{
        let $event : cc.Component.EventHandler = new cc.Component.EventHandler();
        $event.target = $node;
        $event.component = $component;
        $event.handler = $handler;
        if( $param )
            $event.customEventData = $param;
        return $event;
    }
}

PS create參數 :
①-> $node : 放置腳本的cc.Node
②-> $component : 腳本的名稱
③-> $handler : 腳本中為事件處理的函數
④-> $param : 處理函數的用戶自定義的參數
Ⅱ : 設計界面
①,結構圖如下

②,UI效果圖如下

③,BTN不用設置Click Events(我們不用拖控件的方案)

Ⅲ:腳本編寫

import {ClickEvent2CreatTool} from "../tool/ClickEvent2CreatTool";

const {ccclass, property} = cc._decorator;

@ccclass
export default class MainMenu extends cc.Component {

    @property(cc.Button)
    btn_map: cc.Button = null;

    @property(cc.Button)
    btn_building : cc.Button = null;

    @property(cc.Button)
    btn_menu : cc.Button = null;

    private listener2Btn( $isAdd : boolean ) : void{
        if( $isAdd ){
            this.btn_map.clickEvents.push(ClickEvent2CreatTool.Instance.create( this.node , "MainMenu" , "clickHandler" , this.btn_map ));
            this.btn_building.clickEvents.push(ClickEvent2CreatTool.Instance.create( this.node , "MainMenu" , "clickHandler" , this.btn_building ));
            this.btn_menu.clickEvents.push(ClickEvent2CreatTool.Instance.create( this.node , "MainMenu" , "clickHandler" , this.btn_menu ));
        }else{
            this.btn_map.clickEvents.shift();
            this.btn_building.clickEvents.shift();
            this.btn_menu.clickEvents.shift();
        }
    }
    clickHandler( $event : cc.Event.EventTouch, $customEventData : any ) : void{
        switch( $customEventData ){
            case this.btn_map:
                console.log("map click");
                break;
            case this.btn_building:
                console.log("building click");
                break;
            case this.btn_menu:
                console.log("menu click");
                break;
        }
    }

    start () : void {
        this.listener2Btn( true );
    }

    onDestroy() : void{
        this.listener2Btn( false );
    }
}

PS create參數:
①-> this.node 既是UI中的MainMenu節點 , 這個節點會綁定此腳本
②-> MainMenu 腳本的文件名稱
③-> clickHandler 腳本中clickHandler方法為Event處理方法
④-> this.btnmap 自定義的參數
Ⅳ : 在UI中使MainMenu節點綁定腳本MainMenu

Ⅴ : 結果