商品分类标签需加tabindex="0"以支持键盘聚焦和屏幕阅读器识别，配合cursor: pointer、touch-action: manipulation及44×44px最小热区，并用addEventListener绑定click事件，同时拦截子元素事件冒泡。
商品分类标签要真正可点击，不能只靠视觉样式或写个 <div> 就完事——得让它能被键盘聚焦、响应触摸、不和内部按钮冲突，且点击区域必须达标（至少 44×44px）。否则在移动端点不中、盲人用户无法操作、测试时总报无障碍缺陷。
给分类标签加 tabindex="0" 和基础交互声明
浏览器默认把 <div>、<span> 当普通容器，不进键盘焦点流。没 tabindex="0"，键盘用户 Tab 到不了，屏幕阅读器也读不出“可点击”。
- 必须显式加
tabindex="0"，比如<div class="category-tab" tabindex="0">数码电器</div> - CSS 补上
cursor: pointer和user-select: none（防误选文字） - 移动端加
style="touch-action: manipulation"，避免 Safari 静默忽略点击 - 别用
tabindex="-1"——它不能通过 Tab 进入，只适合 JS 主动聚焦的场景
用 addEventListener('click') 绑定跳转，别写 onclick 属性
内联 onclick 看似快，但无法复用、难调试、易重复绑定，还可能和子元素事件打架。
- 统一用
document.querySelectorAll('.category-tab')获取所有标签，再.forEach()绑定 - 回调里用
event.currentTarget.dataset.href读目标路径，比如<div data-href="/category/digital"> - 跳转用
window.location.href = url，别用window.open()或javascript:void(0)——后者无语义，SEO 和无障碍都失败 - 如果要新窗口打开，加
target="_blank" rel="noopener"到对应<a>，但分类标签通常不该开新页
处理内部有按钮/链接时的事件冒泡冲突
分类标签里常嵌“+”号按钮或“更多”链接，点它们时你不希望同时触发整个标签的跳转——那会跳两次，或者链接失效。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 在 click 回调开头加判断：
if (event.target.matches('button, a, [role="button"]')) return; - 用
event.target.closest()替代直接读event.target，防止点到图标或 span 时拿不到data-href - 绝对不要在子元素上写
onclick="event.stopPropagation()"——这会切断所有父级监听，后期加统计或动画就崩了 - 如果必须用
<a>包裹整个标签，确保里面不再嵌<button>或<form>，否则 HTML 解析会被浏览器静默修正，布局错乱
移动端热区不足和视觉反馈缺失
很多分类标签看着大，实际可点区域小：padding 没参与点击判定、圆角裁剪了热区、父容器有 overflow: hidden。
- 给标签容器设
min-height: 44px; min-width: 44px;，再用padding扩展触控面积 - 避免仅靠
border-radius做圆角，配合overflow: hidden会切掉真实点击区域；改用clip-path或确认渲染后用getBoundingClientRect()测实际尺寸 - 加视觉反馈：:active 状态设背景色或缩放，iOS 上还要禁用高亮
-webkit-tap-highlight-color: transparent - 真机测试时，打开 Safari 的「开发 → 仿真器」看点击坐标是否落在元素 bounding rect 内
复杂点不在“怎么让标签变可点”，而在“点完之后状态是否可控”——比如当前激活的分类要不要高亮？有没有 loading 状态？点太快会不会连发两次请求？这些才是上线前最容易被忽略的实际问题。
