Cocos-Button点击事件

Button 点击事件

Button 目前只支持 Click 事件，即当用户点击并释放 Button 时才会触发相应的回调函数。

组件事件结构

属性	功能说明
Target	带有脚本组件的节点。
Component	脚本组件名称。
Handler	指定一个回调函数，当用户点击 Button 并释放时会触发此函数。
CustomEventData	用户指定任意的字符串作为事件回调的最后一个参数传入。

通过脚本代码添加回调

方法一

这种方法添加的事件回调和使用编辑器添加的事件回调是一样的，都是通过代码添加。首先需要构造一个 EventHandler 对象，然后设置好对应的 target、component、handler 和 customEventData 参数。

import { _decorator, Component, Event, Node, Button, EventHandler } from 'cc';
const { ccclass, property } = _decorator; 

@ccclass("example")
export class example extends Component {
    onLoad () {
        const clickEventHandler = new EventHandler();
        clickEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点
        clickEventHandler.component = 'example';// 这个是脚本类名
        clickEventHandler.handler = 'callback';
        clickEventHandler.customEventData = 'foobar'; 

        const button = this.node.getComponent(Button);
        button.clickEvents.push(clickEventHandler);
    }

    callback (event: Event, customEventData: string) {
        // 这里 event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点
        const node = event.target as Node;
        const button = node.getComponent(Button);
        console.log(customEventData); // foobar
    }
}

方法二

通过 button.node.on('click', ...) 的方式来添加，这是一种非常简便的方式，但是该方式有一定的局限性，在事件回调里面无法 获得当前点击按钮的屏幕坐标点。

// 假设我们在一个组件的 onLoad 方法里面添加事件处理回调，在 callback 函数中进行事件处理

import { _decorator, Component, Button } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("example")
export class example extends Component {
    @property(Button)
    button: Button | null = null;
    onLoad () {
        this.button.node.on(Button.EventType.CLICK, this.callback, this);
    }

    callback (button: Button) {
        // 注意这种方式注册的事件，无法传递 customEventData
    }
}

通过脚本触发点击

this.node.getComponent(Button).clickEvents[0].emit(['click']);