Cocos Creator學習四：按鈕響應事件

1.方法一：經過編輯器對cc.Button的屬性進行拖放操做進行控制

(1)建立腳本BtnClick1.js，增長btnClick1函數，而後拖放到Canvas節點中（記得拖放，不然下面步驟將找不到對應的函數）。

    btnClick1: function (event, customEventData) { //這裏 event 是一個 Touch Event 對象，你能夠經過 event.target 取到事件的發送節點
        var node = event.target; var button = node.getComponent(cc.Button); //這裏的 customEventData 參數就等於你以前設置的 "click1 user data"
        cc.log("node=", node.name, " event=", event.type, " data=", customEventData); }

 

(2)按步驟在（按鈕的屬性檢查器）上進行操做

①在Click Events中填上1，而後編輯器自動生成下方屬性輸入

②將Canvas拖動到cc.Node屬性上

③選擇對應腳本BtnClick1.js

④選擇對應處理函數btnClick1

⑤填寫自定義事件數據click1 user data

③點擊後輸出咱們自定義的數據

 

2.方法二：捨棄編輯器上的拖放操做，使用代碼控制

(1)建立腳本BtnClick2.js，增長onLoad和btnClick2函數，而後拖放到Button2節點中。

    onLoad: function () { var clickEventHandler = new cc.Component.EventHandler(); clickEventHandler.target = this.node; //這個 node 節點是你的事件處理代碼組件所屬的節點，這裏就是Button2
        clickEventHandler.component = "BtnClick2";//這個是腳本文件名
        clickEventHandler.handler = "btnClick2"; //回調函名稱
        clickEventHandler.customEventData = "click2 user data"; //用戶數據

        var button = this.node.getComponent(cc.Button); //獲取cc.Button組件
        button.clickEvents.push(clickEventHandler); //增長處理
 }, btnClick2: function (event, customEventData) { //這裏 event 是一個 Touch Event 對象，你能夠經過 event.target 取到事件的發送節點
        var node = event.target; var button = node.getComponent(cc.Button); //這裏的 customEventData 參數就等於你以前設置的 "click2 user data"
        cc.log("node=", node.name, " event=", event.type, " data=", customEventData); }

(2)點擊後輸出咱們自定義的數據

 

3.方法三:不推薦使用此方法！註冊TOUCH事件（不能傳遞自定義數據）

(1)建立腳本BtnClick3.js，增長onLoad函數，而後拖放到Button3節點中。

 onLoad() { this.node.on(cc.Node.EventType.TOUCH_START, function (event) { cc.log("TOUCH_START event=", event.type); }); this.node.on(cc.Node.EventType.TOUCH_MOVE, function (event) { cc.log("TOUCH_MOVE event=", event.type); }); this.node.on(cc.Node.EventType.TOUCH_END, function (event) { cc.log("TOUCH_END event=", event.type); }); }

 

(2)點擊後輸出（PS:當移動到按鈕區域外鬆開，接收不到TOUCH_END事件響應）

 

 

PS：

1.測試環境v2.0.5+win10

2.測試代碼下載地址：https://files-cdn.cnblogs.com/files/chevin/CocosCreatorBlog04.zip

以上。

 

《Cocos Creator學習目錄》