[SOLVED] How to capture cc.Button events?

Cocos Creator
#1

Hi folks,

I read from Cocos API that cc.Button triggers 5 types of events. I am interested in catching the button hover events, but when I try to add this in a script attached to the button:

    // Add an event to the button.
    this.node.on(cc.Button.EVENT_HOVER_IN , function (event) {
        cc.log("detected hover in!");
    });
    this.node.on(cc.Button.EVENT_HOVER_MOVE , function (event) {
        cc.log("detected hover move!");
    });
    this.node.on(cc.Button.EVENT_HOVER_OUT , function (event) {
        cc.log("detected hover out!");
    });

Nothing gets triggered even when I hover on the button.

What’s the correct way to catch these events? I also tried adding a custom event listener on the button, as discussed in this thread, but when I actually mouse over the button, the if (cc.rectContainsPoint(rect, locationInNode)) condition always fails to trigger while the else condition is okay.

If I use the same event listener on a normal sprite (not a button), then it works perfectly fine. Why?

Any help will be much appreciated! :slight_smile:

#2

I started the thread you mentioned :slight_smile:

Converting my project to Cocos Creator it was much much easier to detect mouse over and change mouse cursor accordingly:

    this.node.on('mouseenter', function ( event ) {
        document.body.style.cursor = "pointer";
    });
    this.node.on('mouseleave', function ( event ) {
        document.body.style.cursor = "auto";
    });
2 Likes
#3

Thank you! This works perfectly on buttons! So simple too! :slight_smile: