鼠标支持库

通过使用鼠标支持库可以监听 PC 上的鼠标事件。

1.引入鼠标库

引入鼠标支持库与引入其他第三方库过程相同，首先下载该库，在 egretProperties.json 中引入该库并编译引擎。需要注意库的位置应放在项目外。

{

  "name":  "mouse",

  "path":  "../libsrc"

}

引入到项目中之后编译引擎即可使用鼠标库。

2.支持事件

在鼠标支持库中支持以下事件。

名称	说明
MOUSE_MOVE	当用户鼠标移动时被调用。
MOUSE_OVER	当鼠标正在对象所在区域内（没有被其他对象覆盖）时调用。
MOUSE_OUT	当鼠标移出对象所在区域内（没有被其他对象覆盖）时调用。
ROLL_OVER	当鼠标进入对象所在区域内调用。
ROLL_OUT	当鼠标移出对象所在区域内时调用。

3.使用方法

使用鼠标支持库时需要开启鼠标支持。

//启用舞台的鼠标支持
mouse.enable(this.stage);

调用 enable 方法开启舞台对鼠标事件的支持。开启支持之后即可监听鼠标事件。使用鼠标事件的方法与其他触摸事件是相同的，下面是基本的调用方法：

mouse.enable(this.stage);
//绘制外层容器
this.outContainer  =  new  egret.Sprite();
this.outContainer.name  =  "outContainer";
this.outContainer.graphics.beginFill(0x00ff00);
this.outContainer.graphics.drawRect(0,  0,  300,  300);
this.outContainer.graphics.endFill();
this.addChild(this.outContainer);
this.outContainer.x  =  (this.stage.stageWidth  -  this.outContainer.width)  /  2;
this.outContainer.y  =  (this.stage.stageHeight  -  this.outContainer.height)  /  2;
//绘制里层显示对象
this.inShape  =  new  egret.Sprite();
this.inShape.name  =  "inShape";
this.inShape.graphics.beginFill(0xff0000);
this.inShape.graphics.drawCircle(0,  0,  50);
this.inShape.graphics.endFill();
this.inShape.x  =  this.outContainer.width  /  2;
this.inShape.y  =  this.outContainer.height  /  2;
this.outContainer.addChild(this.inShape);
//开启显示对象的触摸
this.outContainer.touchEnabled  =  true;
this.inShape.touchEnabled  =  true;
//分别监听外层容器的 MouseEvent
this.outContainer.addEventListener(mouse.MouseEvent.ROLL_OVER,  this.onRollOver,  this);
this.outContainer.addEventListener(mouse.MouseEvent.ROLL_OUT,  this.onRollOut,  this);
this.outContainer.addEventListener(mouse.MouseEvent.MOUSE_OVER,  this.onMouseOver,  this);
this.outContainer.addEventListener(mouse.MouseEvent.MOUSE_OUT,  this.onMouseOut,  this);
//分监听内层显示对象的 MouseEvent
this.inShape.addEventListener(mouse.MouseEvent.ROLL_OVER,  this.onRollOver2,  this);
this.inShape.addEventListener(mouse.MouseEvent.ROLL_OUT,  this.onRollOut2,  this);
this.inShape.addEventListener(mouse.MouseEvent.MOUSE_OVER,  this.onMouseOver2,  this);
this.inShape.addEventListener(mouse.MouseEvent.MOUSE_OUT,  this.onMouseOut2,  this);

其中回调函数如下：

onRollOver(e, egret.TouchEvent);
void  {
  console,  :  .log("roll over "  + e.target.name  +  "  "  + e.bubbles)
};
onRollOut(e, egret.TouchEvent);
void  {
  console,  :  .log("roll out "  + e.target.name  +  "  "  + e.bubbles)
};
onMouseOver(e, egret.TouchEvent);
void  {
  console,  :  .log("mouse over "  + e.target.name  +  "  "  + e.bubbles)
};
onMouseOut(e, egret.TouchEvent);
void  {
  console,  :  .log("mouse out "  + e.target.name  +  "  "  + e.bubbles)
};
onRollOver2(e, egret.TouchEvent);
void  {
  console,  :  .log("roll over2 "  + e.target.name  +  "  "  + e.bubbles)
};
onRollOut2(e, egret.TouchEvent);
void  {
  console,  :  .log("roll out2 "  + e.target.name  +  "  "  + e.bubbles)
};
onMouseOver2(e, egret.TouchEvent);
void  {
  console,  :  .log("mouse over2 "  + e.target.name  +  "  "  + e.bubbles)
};
onMouseOut2(e, egret.TouchEvent);
void  {
  console,  :  .log("mouse out2 "  + e.target.name  +  "  "  + e.bubbles)
};

上面代码中绘制了两个 Sprite ，一个当做外层的容器，一个当做内部的显示对象。编译运行观察输出的结果：

• 鼠标移入容器和内层显示对象时都会抛出 MOUSE_OVER 和 ROLL_OVER。
• 鼠标在容器移动到内层显示对象时容器会抛出 MOUSE_OUT 但不会抛出 ROLL_OUT。
• 鼠标从内层显示对象移动到容器时容器会抛出 MOUSE_OVER ，内层会抛出 ROLL_OUT 和 MOUSE_OUT。
• 鼠标完全移动到容器外面时容器才会抛出 ROLL_OUT。

简单比较可以看出 MOUSE 和 ROLL 的区别，MOUSE_OVER 和 MOUSE_OUT 在显示对象的可见区域上触发，而 ROLL_OUT 和 ROLL_OUT 在显示对象的整体上触发。

设置鼠标手型

若希望鼠标移动到可点击区域上时改变鼠标的形状为手型，可以通过 setButtonMode 来设置。

//设置内层显示对象为鼠标手型
mouse.setButtonMode(this.inShape,  true);

setButtonMode 接收两个参数，分别是显示对象和是否开启手型显示。开启之后当鼠标移动到该显示对象上时即可显示为手的形状。

监听鼠标移动事件

监听鼠标的移动事件需要单独开启，调用 setMouseMoveEnabled() 方法即可。

//设置开启鼠标移动事件
mouse.setMouseMoveEnabled(true);

开启鼠标移动事件的监听接口之后，监听该事件:

this.outContainer.addEventListener(mouse.MouseEvent.MOUSE_MOVE,  function  ()  {
  console.log("mouse move");
},  this);

需要注意的是监听鼠标移动事件会消耗更多的性能。