Hide/show a Button

Hide/show a Button


So I have a button, made in the GUI of creator, its a label button, 100% stock, I have one callback on i set in the GUI. This seems to be the best way to make one, I couldn’t find any good examples for TS on how to make one programmatically, and they seem complicated.

Thing is I need to hide and show it. So eventually after much searching, pondering and hunting through docs I found the way to hide/show them is to make a cc.hide/cc.show action and run it as an action on it… ?? really??

All seemed well however, when it is hidden, I still get click/touch events from the button, so I can accidentally click and run the code for the button even though it is hidden.
So how do I make it so I can hide and stop the button from working? It would also be good if I could make the button NOT allow a mouse event to go through to the main canvas/tilemap I have below it. I.e they clicked on the button and not the thing behind the button.

Also what is the best way to position it in Screen space?

My c++ hat says use a layer, but I can’t see how to make one in the creator gui, are they a thing in Creator?



yourButtonNode.active = false;

Should do the trick.


I’m relatively new to using Cocos Creator also, so if I’m wrong about anything perhaps someone with more experience can enlighten both of us.

In order to show/hide the node, you should be able to access the button’s node and set the active flag. Remember, buttons are a component, and components contain logic. Nodes are the things that are rendered, and you can associate one or more components with a node. So button.node.active = false should hide it.

To stop the button from receiving clicks, set button.enabled = false;

If you want to stop an event after the mouse has consumed it, I believe you can call event.stopPropagation().

Not sure how to position in screen space, maybe pass the screen space position to button.node.convertToNodeSpace()?



you can access the node of your button with it’s path:

cc.find("Canvas/something/your_button").active = false;

or you can use properties to access the node of your button or the Button component itself. You don’t have to check its position.

Best regards,


cc.find(“Canvas/something/your_button”).active = false;

I think it’s important to put it clear for new developers in Cocos Creator that this approach is useful “outside” the node’s components. When inside their scripts, you can just access the node by using the “node” property like you said:

this.node.active = false;

Although the result is the same, it is faster as it does not require a parse in the string path and a search in the objects.


There is the point! :slight_smile: