Mouse 组件

提供实体与鼠标相关的事件。

如果不添加此组件，则不会在实体上触发鼠标事件。

事件

MouseOver [Data = {MouseEvent}]: 当鼠标进入时触发

MouseOut [Data = {MouseEvent}]: 当鼠标离开时触发

MouseDown [Data = {MouseEvent}]: 当鼠标按下时触发

MouseUp [Data = {MouseEvent}]: 当鼠标释放时触发

Click [Data = {MouseEvent}]: 当用户单击时触发

DoubleClick [Data = {MouseEvent}]: 当用户双击时触发

MouseMove [Data = {MouseEvent}]: 当鼠标在上方移动时触发

事件回调函数触发时有一个本地的 MouseEvent 参数, 这个参数添加在事件的属性上:

//(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

注意: 如果你的目标是移动设备，你应该知道默认情况下 Crafty 会将触摸事件转换成鼠标事件，使你可以使用鼠标组件处理触摸事件。然而，如果你需要多点触控，这将与鼠标组件不兼容，你需要使用触摸组件代替。

例子

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

参见