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学习目录》