点击事件穿透修复

src/app/play/play.component.ts

@@ -128,6 +128,7 @@ export class PlayComponent implements OnInit, OnDestroy {
 
   // ------------  私有数据  ------------
   m_mapDownQueue = {} //按下事件处理队列
+  m_mapDownQueueZIndex = {} //按下事件处理队列
   m_mapUpQueue = {} //抬起事件处理队列
   m_mapMoveQueue = {} //移动事件处理队列
   m_endPageArr;
@@ -557,7 +558,7 @@ export class PlayComponent implements OnInit, OnDestroy {
       itemNode.ref.selectMark = selectMarkElement.ref; // 保存引用
 
       // 为子节点添加点击事件
-      this.m_mapDownQueue[`list_item_${i}`] = () => {
+      this.subscribeMapDownEvent(`list_item_${i}`, () => {
         if (!isDragging) {
           // 播放音效
           this.g_cartoon.playAudio('click');
@@ -565,7 +566,7 @@ export class PlayComponent implements OnInit, OnDestroy {
           // 切换选中状态
           this.onTouchItem(itemNode, i);
         }
-      };
+      })
 
       // 渲染子节点和选择标记
       itemNode.ref.addChild(selectMarkElement.ref);
@@ -665,7 +666,8 @@ export class PlayComponent implements OnInit, OnDestroy {
     checkBtnElement.ref.y = this.g_canvasHeight - buttonHeight / 2 - 50 * this.g_mapScale; // 距离底部50像素
 
     // 添加点击事件
-    this.m_mapDownQueue['check_btn'] = () => {
+    this.subscribeMapDownEvent('check_btn', () => {
+      this.g_enableMapDown = true;
       if (!this.layoutPage.ref.visible) return
       // 播放点击音效
       this.g_cartoon.playAudio('sm-click');
@@ -682,7 +684,7 @@ export class PlayComponent implements OnInit, OnDestroy {
         console.log('请至少选择2个单词');
         // 这里可以添加提示逻辑
       }
-    };
+    })
 
     // 保存按钮引用，用于状态更新
     this.checkBtnElement = checkBtnElement;
@@ -1285,7 +1287,7 @@ export class PlayComponent implements OnInit, OnDestroy {
       setTimeout(() => {
         this.touchFish = null;
       }, 100);
-    })
+    }, fish.ref.y)
     return fish;
   }
   //-----------------------------------------------------------------钓鱼-动画---------------------------------------------------------
@@ -1800,7 +1802,7 @@ export class PlayComponent implements OnInit, OnDestroy {
     this.render(faYinBtn.ref, zIndexMap.card + 3);
 
     // 为发音按钮添加点击事件
-    this.m_mapDownQueue['fa_yin_btn'] = () => {
+    this.subscribeMapDownEvent('fa_yin_btn', () => {
       this.g_enableMapDown = true;
       // 如果当前有游戏阶段且有正确问题，播放其音频
       const currentStage = this.gameStages[this.currentStageIndex];
@@ -1809,7 +1811,7 @@ export class PlayComponent implements OnInit, OnDestroy {
         // 播放当前正确问题的音频
         this.g_cartoon.playAudio(currentStage.correctQuestion.audio);
       }
-    };
+    })
   }
 
 
@@ -2624,8 +2626,19 @@ export class PlayComponent implements OnInit, OnDestroy {
     if (!this.g_enableMapDown) {
       return;
     }
-    // 遍历所有注册了按下事件的元素
-    for (let cartoonID in this.m_mapDownQueue) {
+    const arr = [];
+    for (let cartoonID in this.m_mapDownQueueZIndex) {
+      arr.push({
+        cartoonID,
+        zIndex: this.m_mapDownQueueZIndex[cartoonID]
+      })
+    }
+    arr.sort((a, b) => {
+      return b.zIndex - a.zIndex;
+    })
+    arr.forEach(item => {
+      const cartoonID = item.cartoonID;
+      if (!this.m_mapDownQueue[cartoonID]) return;
       // 检查点击位置是否在当前元素上
       if (this.checkClickTarget(this.g_cartoon.getCartoonElementRef(cartoonID))) {
         // 禁用地图按下事件，防止多次触发
@@ -2633,7 +2646,17 @@ export class PlayComponent implements OnInit, OnDestroy {
         // 执行对应元素的按下事件回调
         this.m_mapDownQueue[cartoonID]();
       }
-    }
+    })
+    // // 遍历所有注册了按下事件的元素
+    // for (let cartoonID in this.m_mapDownQueue) {
+    //   // 检查点击位置是否在当前元素上
+    //   if (this.checkClickTarget(this.g_cartoon.getCartoonElementRef(cartoonID))) {
+    //     // 禁用地图按下事件，防止多次触发
+    //     this.g_enableMapDown = false;
+    //     // 执行对应元素的按下事件回调
+    //     this.m_mapDownQueue[cartoonID]();
+    //   }
+    // }
   }
 
   /**
@@ -3142,9 +3165,10 @@ export class PlayComponent implements OnInit, OnDestroy {
    * @param id 元素的唯一标识符
    * @param callback 按下事件触发时执行的回调函数
    */
-  subscribeMapDownEvent(id, callback) {
+  subscribeMapDownEvent(id, callback, zIndex = 0) {
     // 将回调函数存储到按下事件队列中，以元素ID为键
     this.m_mapDownQueue[id] = callback
+    this.m_mapDownQueueZIndex[id] = zIndex || 0
   }
 
   /**