Mouse Component

src/inputs/mouse.js#L284-L323

Provides the entity with mouse events. Mouse events get dispatched to the closest (visible & Mouse-enhanced) entity to the source of the event (if available).

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

Triggers all events described in MouseSystem and MouseState, these are:

Events

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

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");
})