craftyjs.github.com

Mouse

Provides the entity with mouse related events

Events

MouseOver [Data: MouseEvent]
when the mouse enters the entity
MouseOut [Data: MouseEvent]
when the mouse leaves the entity
MouseDown [Data: MouseEvent]
when the mouse button is pressed on the entity
MouseUp [Data: MouseEvent]
when the mouse button is released on the entity
Click [Data: MouseEvent]
when the user clicks the entity. See documentation
DoubleClick [Data: MouseEvent]
when the user double clicks the entity
MouseMove [Data: MouseEvent]
when the mouse is over the entity and moves

Crafty adds the mouseButton property to MouseEvents that match one of

- Crafty.mouseButtons.LEFT
- Crafty.mouseButtons.RIGHT
- Crafty.mouseButtons.MIDDLE

Example

myEntity.bind('Click', function() {
     console.log("Clicked!!");
})

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

See Also

Back to top

.areaMap

public this .areaMap(Crafty.polygon polygon)

polygon
Instance of Crafty.polygon used to check if the mouse coordinates are inside this region

public this .areaMap(Array point1, .., Array pointN)

point#
Array with an x and y position to generate a polygon

Assign a polygon to the entity so that mouse events will only be triggered if the coordinates are inside the given polygon.

Example

Crafty.e("2D, DOM, Color, Mouse")
    .color("red")
    .attr({ w: 100, h: 100 })
    .bind('MouseOver', function() {console.log("over")})
    .areaMap([0,0], [50,0], [50,50], [0,50])

See Also