area标签不支持onclick事件冒泡到父map，因其本身不渲染且事件监听在旧版浏览器中不可靠；必须通过document事件委托捕获点击，并确保usemap与map name严格匹配、area嵌套正确。
area 标签本身不支持 onclick 事件冒泡到父 map？
不是不支持，而是 <area> 必须包裹在 <map> 中，且需通过 usemap 关联到 <img>；直接给 <area> 绑定 onclick 在部分浏览器（尤其是旧版 Safari 和 IE）会失效——因为规范只要求 <area> 响应点击跳转，不保证事件监听器可靠触发。
实操建议：
- 统一用
document.addEventListener('click', ...)捕获事件，再通过event.target判断是否为<area> - 确保每个
<area>有唯一id或data-id属性，避免靠coords或shape匹配（易错、难维护） - 不要依赖
event.currentTarget—— 它在委托场景下指向绑定监听器的元素，不是<area>
如何用 localStorage 存 area 点击记录而不覆盖历史？
localStorage 只接受字符串，直接 setItem('clicks', newRecord) 会丢掉之前的数据。必须先读、解析、追加、再写回。
常见错误现象：JSON.parse() 报 SyntaxError: Unexpected token u in JSON at position 0 —— 这是读到了 null（getItem 未命中时返回 null，不是空字符串）。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
JSON.parse(localStorage.getItem('clicks') || '[]')安全初始化数组 - 每条记录至少包含
id、timestamp、url（如果关联跳转） - 写入前检查数组长度，超 100 条可
.slice(-100)截断，避免无限膨胀
const record = { id: area.id, timestamp: Date.now(), url: area.href };
const logs = JSON.parse(localStorage.getItem('clicks') || '[]');
logs.push(record);
localStorage.setItem('clicks', JSON.stringify(logs.slice(-100)));
area 点击后页面跳转了，还能保存记录吗？
能，但必须在跳转发生前完成写入。现代浏览器中 localStorage.setItem 是同步阻塞操作，只要不在跳转之后调用就安全。
容易踩的坑：
- 把保存逻辑写在
setTimeout里 —— 跳转会中断定时器，记录丢失 - 用
fetch或Promise异步存 —— 页面卸载时请求大概率被取消 - 依赖
beforeunload事件补救 —— 该事件不可靠（尤其移动端），且不能执行异步操作
正确做法：点击即刻同步写入，再让默认行为（跳转）自然发生。若需防止重复点击，可加 event.preventDefault() + 手动 window.location.href = area.href，确保控制权在你手里。
为什么点击 area 后 localStorage 里没看到新数据？
最常见原因是开发时开了无痕模式或禁用了本地存储（比如某些企业策略强制关闭 localStorage），此时 setItem 不报错但静默失败。
验证方式：
- 在控制台手动执行
localStorage.setItem('test', 'ok');，再localStorage.getItem('test')看是否返回'ok' - 检查当前协议是否为
file://—— Chrome 等浏览器默认禁用该协议下的localStorage - 确认域名和端口完全一致（
localhost:3000和127.0.0.1:3000视为不同源）
真正难调试的是跨 iframe 场景：如果 <img usemap> 在子 iframe 里，而脚本在父页，localStorage 是按 iframe 的 origin 隔离的，得确保操作发生在同一上下文。
