应使用addEventListener绑定click事件，避免onclick行内属性；需preventDefault防止跳转，用display切换菜单并动态定位，监听document点击空白处关闭时排除图标和菜单元素，移动端优先touchstart并兼顾无障碍焦点管理。
用 click 事件监听图标，别直接写 onclick 行内属性
直接在 <i class="icon"></i> 上加 onclick="showMenu()" 看似快，但后续难维护、无法批量绑定、调试也麻烦。应该用 addEventListener 统一管理。
常见错误是点击后菜单一闪就消失——因为没阻止默认行为或事件冒泡，尤其图标在 <a> 或表单内时容易触发跳转或提交。
- 给图标元素加唯一
id或data-menu-target属性，比如data-menu-target="user-menu" - 用
document.getElementById()或document.querySelector()获取元素，再绑定click事件 - 在回调里调用
event.preventDefault()防止意外跳转
弹出菜单建议用 position: absolute + display 切换，别用 visibility: hidden
visibility: hidden 仍占布局空间，鼠标悬停或点击时位置会偏移；opacity: 0 加过渡动画又可能误触。最稳妥的是控制 display，配合 top/left 定位。
注意：绝对定位的菜单需确保父容器有 position: relative，否则会相对于 body 偏移，导致弹出位置错乱。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 菜单
<div id="user-menu" class="dropdown-menu">初始设display: none - 点击图标后设
display: block，并用getBoundingClientRect()动态计算弹出位置 - 如果页面有滚动，记得监听
scroll或resize，隐藏菜单或重定位（否则菜单会“粘”在原处）
点击空白处关闭菜单必须监听 document，且要排除菜单和图标本身
只监听图标外的区域，不能简单判断 event.target === menu 就关闭——用户点图标要展开，点菜单项要执行操作，点空白才关闭。
典型翻车场景：菜单里有按钮，点击后菜单消失，但按钮没响应。这是因为关闭逻辑在捕获阶段就执行了，没留给子元素处理机会。
- 用
document.addEventListener('click', handler)，在handler里检查event.target - 用
!icon.contains(event.target) && !menu.contains(event.target)双重排除 - 不要用
focusout或blur，它们对div不可靠，且不兼容所有交互方式（如触摸）
移动端要考虑 touchstart 替代 click，并防重复触发
在 iOS Safari 和部分安卓浏览器上，click 有约 300ms 延迟，用户会感觉卡顿；而且手指轻点容易误判为滑动，导致菜单闪开又关。
更糟的是，同时监听 click 和 touchstart 会导致 PC 端点一次、移动端点两次（touchstart + click）。
- 优先用
touchstart，但加if ('ontouchstart' in window)判断环境 - 给图标加
cursor: pointer和-webkit-tap-highlight-color: transparent消除点击反馈干扰 - 用
event.preventDefault()在touchstart里阻止默认行为，避免滚动冲突
真实项目里最常被忽略的是焦点管理：键盘用户按 Tab 进入图标后，按 Enter 或 Space 应该也能展开菜单；菜单打开后，焦点要自动移到第一个可交互项，并支持用方向键切换——这部分不加，WCAG 无障碍就算不过。
