---

页面能正常渲染、控制台也没有报错，但点击主页任意位置后裁员次数与总用时都不动。问题出在事件绑定：点击监听挂在挂载容器 #app 自身上，从未生效。

---

问题分析

Vue 3 使用 app.mount('#app') 挂载时，模板取自 #app 的 innerHTML，挂载容器自身的属性（含 @pointerdown）不会进入编译流程。因此 <div id="app" @pointerdown="onTap"> 里的事件指令被整段忽略，DOM 上看不到任何监听器，点击自然毫无反应。

由于模板内部（计数、计时、HR 动画）本身没问题，页面依旧能完整渲染且不抛错，所以故障现象表现为"静默失效"，很容易被误判成 CSS 遮挡或浏览器兼容问题。

---

解决方案

在 #app 内部新增一层 .stage 承载点击，事件指令必须写在模板内部才会被编译：

• 把 @pointerdown="onTap" 从 #app 移到内层 <div class="stage"> 上，所有内容（面板、场景、浮动 +1、对话框）都包进这一层
• 把原先写在 #app 上的全屏尺寸、flex 布局与 cursor: pointer 一并迁移到 .stage，#app 只保留背景
• .stage 覆盖整个视口，页面任意位置的点击都会冒泡到它，行为与需求一致

---

验证

用无头 Chrome 以 elementFromPoint 取点击坐标处的最深层元素派发 pointerdown（等同真实点击）：计数随之递增、计时启动，连点 440 次后正常弹出结束对话框；点"重新开始游戏"后计数归零且不会误增次数。