Cocos Creator 教程：如何防止节点触摸事件“穿透”到背景

最新推荐文章于 2025-06-27 10:47:36 发布

原创

最新推荐文章于 2025-06-27 10:47:36 发布 · 1.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#游戏引擎

在游戏开发中，常常需要在弹窗或特定节点上阻止触摸事件向下传播，以避免影响背景层的节点交互。例如，当一个弹窗出现时，玩家触摸弹窗区域，应该只影响弹窗，而不应该触发背后场景中的点击事件。

今天我们就来讲解如何通过 Cocos Creator 防止节点穿透点击的问题。

实现目标

1. 当弹窗节点（propNode）出现时，触摸弹窗区域只作用于弹窗，不会触发背景层的交互。

2. 关闭弹窗后，背景层恢复正常的交互能力。

步骤 1：阻止事件传播

在 Cocos Creator 中，触摸事件是可以逐层向下传播的。通过设置 event.propagationStopped = true，可以阻止事件从当前节点继续向下传播。

以下是完整脚本实现：

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

@ccclass('propNodeControl')
export class propNodeControl extends Component {
    start() {
        // 为当前节点添加触摸事件监听器
        this.node.on(Node.EventType.TOUCH_START, this.blockTouch, this);
        this.node.on(Node.EventType.TOUCH_END, this.blockTouch, this);
        this.node.on(Node.EventType.TOUCH_MOVE, this.blockTouch, this);
        this.node.on(Node.EventType.TOUCH_CANCEL, thi