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學習目錄》