Mouse Component

Provides the entity with mouse related events.

If you do not add this component, mouse events will not be triggered on the entity.

Events

MouseOver [Data = {MouseEvent}]
when the mouse enters
MouseOut [Data = {MouseEvent}]
when the mouse leaves
MouseDown [Data = {MouseEvent}]
when the mouse button is pressed on
MouseUp [Data = {MouseEvent}]
when the mouse button is released on
Click [Data = {MouseEvent}]
when the user clicks
DoubleClick [Data = {MouseEvent}]
when the user double clicks
MouseMove [Data = {MouseEvent}]
when the mouse is over and moves

The event callbacks are triggered with a native MouseEvent parameter, which is further augmented with additional properties:

//(x,y) coordinates of mouse event in web-browser (screen) space
e.clientX
e.clientY

//(x,y) coordinates of mouse event in world (default viewport) space
e.realX
e.realY

// Normalized mouse button according to Crafty.mouseButtons:
// Crafty.mouseButtons.LEFT, Crafty.mouseButtons.RIGHT or Crafty.mouseButtons.MIDDLE
e.mouseButton

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

var myEntity = Crafty.e('2D, Canvas, Color, Mouse')
.attr({x: 10, y: 10, w: 40, h: 40})
.color('red')
.bind('Click', function(MouseEvent){
  alert('clicked', MouseEvent);
});

myEntity.bind('MouseUp', function(e) {
   if( e.mouseButton == Crafty.mouseButtons.RIGHT )
       Crafty.log("Clicked right button");
})