在Cocos Creator中为Sprite添加点击事件监听失败求助

核心问题分析 #

你的代码存在几个关键错误，导致点击事件无法触发：

• 节点引用错误：直接使用node.on，但当前作用域无此变量，需用this.node指代组件挂载的节点
• 模块导入不全：使用了Animation和鼠标事件类型，但未从cc模块中导入对应对象
• 交互未启用：Sprite节点默认不响应鼠标事件，需手动开启交互属性

修正后的代码 #

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

@ccclass('NewComponent')
export class NewComponent extends Component {

    start() {
        // 启用节点交互，允许接收鼠标事件
        this.node.setInteractive(true);

        // 播放动画（修正Animation组件的引用方式）
        const anim = this.getComponent(Animation);
        if (anim) {
            anim.play("anim_pers");
            console.log('动画已播放');
        } else {
            console.warn('节点上未挂载Animation组件');
        }
        console.log('start');

        // 绑定鼠标点击事件（修正节点引用，指定事件类型）
        this.node.on(Node.EventType.MOUSE_DOWN, (event: EventMouse) => {
            console.log('Mouse down');
        }, this);
    }

    update(deltaTime: number) {}
}

额外检查项 #

• 确保编辑器中Sprite节点的UI属性面板已勾选"交互"选项
• 确认节点没有被上层UI元素遮挡，导致点击事件无法传递
• 检查相机渲染层级，保证Sprite节点在相机可视范围内

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