new event: Phaser.Input.Events.GAMEOBJECT_CLICK

[michalfialadev]

It would be nice to have an event that handles interactive object CLICKs. Not just click on OUT behavior. Click on OUT behavior has this issue, where when you DOWN anywhere, then drag on top of an interactive object and release - OUT, it will trigger on that interactive object.

To produce a CLICK event, we can use the following 3 methods and a boolean flag:

// isDown = true; 
Phaser.Input.Events.GAMEOBJECT_POINTER_DOWN

// isDown = false;
Phaser.Input.Events.GAMEOBJECT_POINTER_OUT

// if (isDown) { this.emit(Phaser.Input.Events.GAMEOBJECT_CLICK); }
Phaser.Input.Events.GAMEOBJECT_POINTER_UP

The main reason to have a CLICK is convenience. We can use the above implementation to wrap our code around that and write our own CLICK event to emit.. but it would be handy to have it supported internally by phaser. I remember ActionScript 1/2/3 did it this way also :).

EDIT: perhaps more difficult than described above, should prob. also handle the situation where mouse leaves window (if interactive object is close to/overflows window border - the flag should also reset to false [unsure where to observe this from, prob. somewhere outside the interactive object... :/]).

[gnuhead-chieb]

Workaround:

Object clicked and released without pointer moving

this.add.text(100, 200, 'Click me', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }).setInteractive({ draggable: true });

this.input.on('dragend', (pointer, object) =>{
    if(pointer.x==object.input.dragStartXGlobal &&
        pointer.y==object.input.dragStartYGlobal){
                alert("Object clicked");
    }
});

Object clicked and released in allowable moving range

this.add.text(100, 200, 'Click me', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }).setInteractive({ draggable: true });

this.input.on('dragend', (pointer, object) =>{
    if(pointer.x>=object.input.dragStartXGlobal-5 &&
        pointer.x<=object.input.dragStartXGlobal+5 &&
        pointer.y>=object.input.dragStartYGlobal-5 &&
        pointer.y<=object.input.dragStartYGlobal+5){
            alert("Object clicked");
    }
});

Object clicked and released in object display range

this.add.text(100, 200, 'Click me', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }).setInteractive({ draggable: true });

this.input.on('dragend', (pointer, object) =>{
    if(pointer.x>=object.x&&pointer.x<=object.x+object.width &&
        pointer.y>=object.y&&pointer.y<=object.y+object.height){
            alert("Object clicked");
    }
});

[photonstorm]

Thanks for opening this feature request. CLICK is subtly difficult, given all the edge cases it has to consider. I feel, at this point in Phaser's life, it's probably best left implemented in the game code. There are lots of gestures I'd love to add to Phaser, but I don't want to complicate the input system any further at this point, so would instead point you to the superb Rex UI gestures he's made available.