在Cocos Creator 3.8中如何通过node.on(TOUCH_START)获取鼠标按键？

Cocos Creator的TOUCH_START事件本质是为触摸交互设计的，默认的TouchEvent对象并没有直接暴露鼠标按键属性，你需要通过获取原生DOM事件来拿到鼠标按键信息，具体实现如下：

• 在TOUCH_START回调里，调用event.getNativeEvent()获取浏览器原生的MouseEvent对象
• 原生MouseEvent的button属性对应按键：0=左键，1=中键，2=右键

示例代码 #

import { _decorator, Component, Node, TouchEvent } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('YourComponent')
export class YourComponent extends Component {
    start() {
        this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
    }

    private onTouchStart(event: TouchEvent) {
        // 获取原生鼠标事件
        const nativeMouseEvent = event.getNativeEvent() as MouseEvent;
        const button = nativeMouseEvent.button;
        
        console.log(`当前按下的鼠标按键：${button}`);

        // 按按键类型执行对应逻辑
        switch(button) {
            case 0:
                // 左键触发的逻辑
                break;
            case 1:
                // 中键触发的逻辑
                break;
            case 2:
                // 右键触发的逻辑
                // 若要阻止浏览器默认右键菜单，可添加：
                // event.preventDefault();
                break;
        }
    }
}

注意事项 #

• 该方法仅在桌面平台生效，移动端的触摸事件不会生成MouseEvent对象
• 如果需要处理右键，记得调用event.preventDefault()屏蔽浏览器默认的右键菜单弹窗

内容的提问来源于stack exchange，提问作者Tynamite Games