Button Component Reference

The button component responds to a click from the user. When the user clicks a Button, its status will change. In addition, users can assign a custom behavior to buttons' click event.

Click the Add Component button at the bottom of the Properties panel and select Button from UI Component. Then you can add the Button component to the node.

Button Property

Note: When Transition is SPRITE and the disabledSprite property has a spriteFrame associated with it, the Enable Auto Gray Effect property is ignored at this time.

Button Transition

Button Transition is used to indicate the status of the Button when clicked by the user. Currently the types available are NONE, COLOR, SPRITE and SCALE.

Color Transition

Sprite Transition

Scale Transition

Button Click Event

The Button can additionally add a Click event to respond to the player's click action. There are two ways to do this.

Add a callback using the Properties.

Add a callback using the script.

There are two ways to add a callback through the script.

1. The event callback added by this method is the same as the event callback added by the editor, all added by code. First you need to construct a cc.Component.EventHandler object, and then set the corresponding target, component, handler and customEventData parameters.

    // here is your component file, file name = MyComponent.js 
    cc.Class({
        extends: cc.Component,
        properties: {},
   
        onLoad: function () {
            var clickEventHandler = new cc.Component.EventHandler();
            clickEventHandler.target = this.node; // This node is the node to which your event handler code component belongs
            clickEventHandler.component = "MyComponent";// This is the code file name
            clickEventHandler.handler = "callback";
            clickEventHandler.customEventData = "foobar";
   
            var button = this.node.getComponent(cc.Button);
            button.clickEvents.push(clickEventHandler);
        },
   
        callback: function (event, customEventData) {
            // here event is a Event object, you can get events sent to the event node node
            var node = event.target;
            var button = node.getComponent(cc.Button);
            // here the customEventData parameter is equal to you set before the "foobar"
        }
    });
   

2. By button.node.on ('click', ...) way to add, this is a very simple way, but the way there are some limitations in the event callback which can not gets the screen coordinate point of the current click button.

    // Suppose we add an event handler callback to the onLoad method of a component and handle the event in the callback function:
   
    cc.Class({
        extends: cc.Component,
   
        properties: {    
            button: cc.Button
        },
   
        onLoad: function () {
            this.button.node.on('click', this.callback, this);
        },
   
        callback: function (button) {
            // do whatever you want with button
            // In addition, attention to this way registered events, can not pass customEventData
        }
    });