Mouseover event on buttons?

I am building an HTML5 game using Cocos 2d-x JS and I’d like to change the mouse cursor to a pointer whenever it is over a button.

Changing the cursor is easy:

cc.$("#gameCanvas").style.cursor = "pointer";

But detecting when the cursor is over a button (or any other widget) seems to be hard. I found no reference to a mouseover event. How could I do that ?

Up.

I still haven’t figured out how to do that. Any ideas ?

If your button is an instance of cc.Sprite/cc.Node, just add this code in ctor function or anywhere in your class :

cc.eventManager.addListener({
event: cc.EventListener.MOUSE,
onMouseMove: function(event){
    var target = event.getCurrentTarget();
    var locationInNode = target.convertToNodeSpace(event.getLocation());
    
    var s = target.getContentSize();
    var rect = cc.rect(0, 0, s.width, s.height);

    //Check the click area
    if (cc.rectContainsPoint(rect, locationInNode)) {       
        // MOUSE OVER
    } else {
        // MOUSE NOT OVER
    }
}
},this);
2 Likes

It did work, thanks a lot!