MouseSystem System

src/inputs/mouse.js#L150-L183

Provides access to mouse events.

Note: Additional events and methods are inherited from the MouseState component.

Events

MouseOver [Data = {MouseEvent}]
when the mouse enters an entity
MouseOut [Data = {MouseEvent}]
when the mouse leaves an entity
Click [Data = {MouseEvent}]
when the user clicks
DoubleClick [Data = {MouseEvent}]
when the user double clicks

The event callbacks are triggered with a native MouseEvent received by Crafty's stage (Crafty.stage.elem), which is wrapped in a standard Crafty event object (as described in MouseState).

These mouse events are triggered on the MouseSystem itself. Additionally, they are dispatched to the closest (visible & Mouse-enhanced) entity to the source of the event (if available).

Note: If you're targeting mobile, you should know that by default Crafty turns touch events into mouse events, making mouse dependent components work with touch. However, if you need multitouch, you'll have to make use of the Touch component instead, which can break compatibility with things which directly interact with the Mouse component.

Example

Log the current position of the mouse.

Crafty.s('Mouse').bind('MouseMove', function(e) {
    Crafty.log('Mouse pos: <' + e.realX.toFixed(2) + ', ' + e.realY.toFixed(2) + '>');
});