feat(map): add mask node click close function for info popup

1. 新增遮罩节点属性与编辑器绑定配置
2. 实现点击弹窗外遮罩区域自动关闭弹窗逻辑
3. 添加兜底查找遮罩节点的逻辑
4. 完善事件的注册与注销处理
This commit is contained in:
pan
2026-08-31 11:05:46 +08:00
parent 9483a8c1ec
commit 5d7ad91091
2 changed files with 1100 additions and 584 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -125,6 +125,10 @@ export class SinfoComp extends CCComp {
@property({ type: Node, displayName: "关闭按钮" })
private close_btn: Node = null;
/** 全屏遮罩节点(铺满屏幕,点击弹窗主体以外区域关闭) */
@property({ type: Node, displayName: "遮罩节点" })
private mask_node: Node = null;
/** 技能未激活图标背景(技能未激活时显示,已激活隐藏) */
@property({ type: Node, displayName: "未激活图标背景" })
private inactive_bg: Node = null;
@@ -144,6 +148,11 @@ export class SinfoComp extends CCComp {
this.close_btn = this.node.getChildByName("close");
}
this.close_btn?.on(NodeEventType.TOUCH_END, this.onCloseClick, this);
// 遮罩点击关闭:编辑器未绑定时按节点名 "mask" 兜底查找
if (!this.mask_node) {
this.mask_node = this.node.getChildByName("mask");
}
this.mask_node?.on(NodeEventType.TOUCH_END, this.onMaskClick, this);
}
onDisable() {
@@ -161,6 +170,9 @@ export class SinfoComp extends CCComp {
if (this.close_btn && this.close_btn.isValid) {
this.close_btn.off(NodeEventType.TOUCH_END, this.onCloseClick, this);
}
if (this.mask_node && this.mask_node.isValid) {
this.mask_node.off(NodeEventType.TOUCH_END, this.onMaskClick, this);
}
// 注销全局触摸监听
input.off(Input.EventType.TOUCH_END, this.onGlobalTouch, this);
}
@@ -194,6 +206,13 @@ export class SinfoComp extends CCComp {
this.close();
}
/** 遮罩点击:触点位于弹窗主体之外,直接关闭 */
private onMaskClick(event: EventTouch) {
event.propagationStopped = true;
oops.audio.playEffect("music/button");
this.close();
}
/** 全局触摸结束:触点落在弹窗包围盒外才关闭 */
private onGlobalTouch(event: EventTouch) {
if (!this.node || !this.node.isValid) return;