CocosCreator开发笔记(13)-如何处理鼠标事件

Cocos Creator的 cc.Node 有一套完整的事件监听和分发机制。在这套机制之上，引擎提供了一些基础的节点相关的系统事件。

Cocos Creator支持的系统事件包含鼠标、触摸、键盘、重力传感等四种，其中鼠标和触摸事件是被直接触发在相关节点上的，所以称为节点系统事件。与之对应的，键盘和重力传感事件被称为全局系统事件。

本文主要讲述如何处理节点系统中的鼠标事件。过程非常简单，只要注册该事件类型，并编写相应的处理函数即可，如下：

在 node 节点的 onLoad 中注册鼠标事件响应

onLoad () {
    this.node.on(cc.Node.EventType.MOUSE_DOWN, this.onMouseDown, this);
    this.node.on(cc.Node.EventType.MOUSE_UP, this.onMouseUp, this);
    this.node.on(cc.Node.EventType.MOUSE_WHEEL, this.onMouseWheel, this);
},

在 node 节点的 onDestroy 中注销鼠标事件响应

onDestroy () {
    this.node.off(cc.Node.EventType.MOUSE_DOWN, this.onMouseDown, this);
    this.node.off(cc.Node.EventType.MOUSE_UP, this.onMouseUp, this);
    this.node.off(cc.Node.EventType.MOUSE_WHEEL, this.onMouseWheel, this);
},

处理鼠标按下事件

onMouseDown: function(event) {
    let mouseType = event.getButton();
    if (mouseType === cc.Event.EventMouse.BUTTON_LEFT) {
        // 鼠标左键按下
        let mousePoint = event.getLocation();
        let localPoint = this.node.convertToNodeSpace(mousePoint);
        ...
    } else if (mouseType === cc.Event.EventMouse.BUTTON_MIDDLE) {
        // 鼠标中键按下
        ...
    } else if (mouseType === cc.Event.EventMouse.BUTTON_RIGHT) {
        // 鼠标右键按下
        ...
    }
},

处理鼠标释放事件

onMouseUp: function(event) {
    let mouseType = event.getButton();
    if (mouseType === cc.Event.EventMouse.BUTTON_LEFT) {
        // 鼠标左键释放
        let mousePoint = event.getLocation();
        let localPoint = this.node.convertToNodeSpace(mousePoint);
        ...
    } else if (mouseType === cc.Event.EventMouse.BUTTON_MIDDLE) {
        // 鼠标中键释放
        ...
    } else if (mouseType === cc.Event.EventMouse.BUTTON_RIGHT) {
        // 鼠标右键释放
        ...
    }
},

处理鼠标滚轮事件

onMouseWheel: function(event) {
    let scrollY = event.getScrollY();
    ...
},