egret通过mouse第三方库实现鼠标监听和实现通过鼠标滚轮滑动Scroller

项目中有接触到PC端egret的开发，那么很容易就会涉及到通过鼠标滚动轮来滚动Scroller；egret是可以通过添加第三方库mouse引入鼠标库但是没有支持滚动轮的事件，
最开始的时候是有在egret社区有位大佬分享过怎么添加的（现在没找到），但是社区越来越差感觉都要倒闭了一样，为了以后说不定会用到所以还是保留一下方式。

添加第三方库实现鼠标监听

最开始引入鼠标库，这里可以参考官方提供的引入鼠标库的文档添加第三方鼠标支持库,

引入鼠标库

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

{
    "name": "mouse",
    "path": "../libsrc"
}

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

支持事件

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

使用方法

在main.ts 创建场景的方法里添加下方代码

mouse.enable(this.stage);// 启用舞台添加鼠标支持库
mouse.setMouseMoveEnabled(true);//设置开启鼠标移动事件

设置鼠标手型

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

//设置内层显示对象为鼠标手型
mouse.setButtonMode(this.inShape, true);
setButtonMode 接收两个参数，分别是显示对象和是否开启手型显示。开启之后当鼠标移动到该显示对象上时即可显示为手的形状。

监听鼠标移动事件

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

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

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

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

添加玩build一下

egret build -e

实现添加鼠标滚轮事件

因为监听鼠标滚轮需要添加鼠标事件；在完成添加鼠标库后就可以添加监听滚轮了。

在index.html添加js滚轮事件DOMMouseScroll

// /*注册鼠标事件*/ 
if (document.addEventListener) {
    document.addEventListener('DOMMouseScroll', scrollFunc, false);
}//W3C 
window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome
function scrollFunc(event) {
    var e = event || window.event;
    if (e.wheelDelta) {//IE/Opera/Chrome 
        if (e.wheelDelta > 0) {
            FeedWheel.MouseWheelEvent.coordinateY = -50;
        } else if (e.wheelDelta < 0) {
            FeedWheel.MouseWheelEvent.coordinateY = 50;
        }
    } else if (e.detail) {//Firefox
        if (e.detail > 0) {
            FeedWheel.MouseWheelEvent.coordinateY = 50;
        } else if (e.detail < 0) {
            FeedWheel.MouseWheelEvent.coordinateY = -50;
        }
    }
    FeedWheel.MouseWheelEvent.eventDispatcher.dispatchEvent(egret.Event.create(egret.Event, "EVT_MOUSE_WHEEL", false));
}

添加一个MouseWheelEvent.ts模块

方便在egret调用

module FeedWheel {
	export class MouseWheelEvent {
		public static coordinateY: number = 0;
		public static eventDispatcher: egret.EventDispatcher = new egret.EventDispatcher();
		public constructor() {
		}
	}
}

在egret调用

监听mouseScroller滚动条

FeedWheel.MouseWheelEvent.eventDispatcher.addEventListener("EVT_MOUSE_WHEEL", ($e?) => {
	if (this.mouseScroller.viewport.contentHeight < this.mouseScroller.height || this.isMouse) { return; }
	this.mouseScroller.viewport.scrollV = this.mouseScroller.viewport.scrollV + FeedWheel.MouseWheelEvent.coordinateY;
	if ((this.mouseScroller.viewport.scrollV + this.mouseScroller.height) >= this.mouseScroller.viewport.contentHeight) {
		this.mouseScroller.viewport.scrollV = this.mouseScroller.viewport.contentHeight - this.mouseScroller.height;
	} else if (this.mouseScroller.viewport.scrollV <= 0) {
		this.mouseScroller.viewport.scrollV = 0;
	}
}, this);

在使用这种方式添加后如果在同一个界面上有多个滚动条会出现多个滚动条同时滚动,所以需要加一个this.isMouse判断是哪个滚动条在滚动

this.mouseGup.addEventListener(mouse.MouseEvent.MOUSE_MOVE, this.inMouseEven, this);
this.mouseGup.addEventListener(mouse.MouseEvent.MOUSE_OUT, this.outMouseEven, this);

这里通过添加一个全局变量isMouse去判断鼠标在哪个滚动条在滚动

private isMouse: boolean = true;
private inMouseEven(): void {
	this.isMouse = false;
}
private outMouseEven(): void {
	this.isMouse = true;
}

这部分是现在我能暂时使用的方式，应该还有比较好的方式，如果有更好的方式请告知。