嗯来吧 · 原型按钮体检报告
扫描对象:嗯来吧-融合版.新原型.html(2,157,480 字节) · 扫描时间:本次会话
1结论
1真坏按钮(函数不存在) · 已修
94主应用实测按钮
0大学社 3 个页签:坏按钮 / 被遮挡
5本轮累计修复的无响应按钮
结论:功能性"点了没反应"的按钮已全部清零(本轮修 5 个)。但根因是两类写法问题,研发阶段必须从源头改掉,否则新加的按钮会继续踩坑(见第 3 节)。
2扫描明细
A. 必修真问题(已修复)
| 位置 | 按钮 | onclick | 问题 | 状态 |
| 发布需求面板 | 存草稿 | dxsReqSaveDraft(true) | 函数在原型里根本没有定义,点击无任何反应(也不报错) | 已修 |
B. 本轮已修的无响应按钮(你逐个发现 + 我兜底)
| 界面 | 按钮 | 症状 | 根因 | 修法 |
| 校园互助 | 右下 + | 点了没反应,发布面板不弹 | dxcFabPlusAct() 未定义 | 补函数 + 父应用消息桥 dxs:'pub' |
| 圈子详情 | ‹ 返回 | 进得去出不来 | 点击被其它捕获处理器吞掉 | document 级捕获兜底 |
| 接单详情 | 分享海报 | 按钮在,点了不出海报 | ①详情面板未关导致叠层 ②点击被吞 | 先关面板再开 + window 级捕获兜底 |
| 发布面板 | 技能/需求/组队/活动/转让/求救 | 6 个入口点了没反应 | 点击被吞(写法为 dxsRoleGuard(函数)) | window 级捕获 + 先关面板再开目标页 |
| 发布需求 | 存草稿 | 点了没反应 | 函数未定义 | 补 dxsReqSaveDraft():写草稿状态 + 提示 |
3根因:两类写法会让按钮"点了没反应"
类型一:内联 onclick 调用"看不见"的函数
内联 onclick="foo()" 只能调用全局作用域的函数。如果 foo 定义在闭包 / 模块 / IIFE 里,点击就是静默失败(控制台只有 ReferenceError,用户完全无感)。原型的学籍认证、圈子都属于这个类型 —— 文档里能看到函数,浏览器里 typeof foo === 'undefined'。
// ✗ 会静默失效
(function(){
function openAuthSheet(){ /* 弹层 */ }
document.body.innerHTML='<button onclick="openAuthSheet()">去认证</button>';
})();
// ✓ 正确
(function(){
function openAuthSheet(){ /* 弹层 */ }
window.openAuthSheet = openAuthSheet; // 或改用事件委托
})();
类型二:点击事件被上游 stopPropagation() 吞掉
原型里有多个 document.addEventListener('click', handler, true)(捕获阶段)。只要其中一个提前 ev.stopPropagation(),元素自身的 onclick 就永远不触发 —— 按钮"看起来好着",点下去没反应。
给研发的整改要求(4 条)
- 禁止内联
onclick;统一用 addEventListener 或 React 的 onClick(作用域问题天然消失)
- 需要全局暴露时,显式
window.xxx = xxx,并在启动时做一次"函数存在性自检"
- 捕获阶段的监听器不要无条件
stopPropagation();只有确实要拦截时才拦,且只拦自己的目标
- 每个按钮都要有反馈:点击后至少出现 toast / 面板 / loading,避免"沉默失败"
4自检清单(发版前逐条过)
- ① 每个
onclick 的函数在浏览器控制台执行 typeof fn === 'function' 都是 true
- ② 每个按钮点下去都有可感知反馈(面板/toast/状态变化),没有"沉默按钮"
- ③ 弹层打开前先关闭已有弹层,避免叠层导致的"点了没反应"
- ④ 用真机(或 DevTools 触摸模拟)点一遍,而不只是看代码
- ⑤ 关键路径(发布、接单、支付、分享)加冒烟用例:自动点击并断言面板出现
- ⑥ 捕获阶段的事件监听器审查一遍,确认没有无条件
stopPropagation
5我加的兜底层(临时,研发落地后应删除)
| 兜底层 | 作用 |
__pubEntryGuard | 发布面板 6 个入口:技能/需求/组队/活动/转让/求救 |
__ocShareGuard | 接单详情「分享海报」 |
__dxsFabPlus | 校园互助 + 打开发布面板 |
__dxsHotCircle / __dxsHotDelegate | 热门圈子切换当前圈子 |
__dxsCircleDetail | 圈子详情页(含返回) |
__reqDraftFix | 发布需求「存草稿」 |
这些兜底层只保证原型可演示。研发实现时应直接按正规写法落地(事件绑定 + 全局暴露),不要照抄兜底逻辑。