直接用html+css+js可实现扫码点单电子菜单：需合理dom结构、事件委托绑定、状态隔离（如sessionstorage存桌号）、购物车动态渲染与防误触交互，双击index.html即可运行。
直接用 HTML + CSS + JS 就能做出可扫码、可点单、可加减数量的电子菜单，不需要框架、不依赖后端，双击 index.html 就能跑 —— 但前提是 DOM 结构合理、事件绑定不漏、状态管理不靠全局变量。
菜品卡片怎么写才支持点击加减和实时计数
别用一堆 onclick="add(1)" 写死在标签里，容易重复绑定、无法动态更新数量显示。每个菜品卡片必须有唯一标识（比如 data-id="dish-001"），数量输入框用 <input type="number"> 并设 min="0" max="50"，再配合一个 data-qty 属性存当前值。
- 加减按钮统一用 JS 绑定事件，通过
event.target.closest(".dish-card")找到父卡片，再取dataset.id和querySelector("input").value - 输入框要监听
input和change两个事件，防止手动输非数字或粘贴非法内容 - 数量为 0 时，建议自动从购物车 DOM 中移除对应项，而不是留着空行
扫码进入后怎么自动识别桌号并隔离订单
微信/支付宝扫码打开的 URL 通常带参数，例如 menu.html?table=8806。页面加载时必须立刻解析 window.location.search，提取 table 值并存入 sessionStorage.tableId，后续所有订单提交都带上这个字段。
- 不要用
localStorage—— 同一设备多桌扫码会串单 - 解析失败（如无参数或格式错）应禁用下单按钮，并提示“请通过餐厅二维码进入”
- 桌号一旦确定，禁止用户手动修改，避免前端伪造；后端校验是另一层事，但前端得守住第一道门
购物车浮层怎么做到不遮挡又不卡顿
底部固定购物车栏（position: fixed; bottom: 0;）是最简方案，但 iOS Safari 下软键盘弹出会把 fixed 元素顶上去，导致遮挡。解决方案是改用 position: absolute + 监听视口高度变化。
- 用
window.visualViewport?.height判断是否软键盘展开，动态切换定位方式 - 购物车列表用
max-height: 200px; overflow-y: auto;，别让内容撑爆屏幕 - 每次增删商品，只重绘购物车 DOM 片段，不要清空整个
innerHTML再重建 —— 避免滚动位置丢失
为什么移动端点击加减按钮经常失灵或连点两次
这是典型的 300ms 点击延迟 + 事件冒泡冲突问题。iOS 和旧版 Android 对 click 有延迟，而 tap 又不是原生事件。最稳做法是：给所有交互元素加 touchstart 监听，并在回调里 event.preventDefault()，同时用 setTimeout 防抖（间隔至少 200ms）。
- 别在按钮上同时绑
click和touchstart—— 容易触发两次 - 加减按钮的
disabled状态必须同步更新，防止连点时数量跳变 - 真机测试时，务必关掉 Chrome 的“模拟触屏”，它对
touchstart的触发逻辑和真实设备不一致
真正难的不是写出能点的菜单，而是让 60 岁阿姨扫完码、看清菜名、点对辣度、不误触加十份米饭、还能顺利结账 —— 所有交互反馈（按钮按压态、数量变化动画、成功提示）都不能省，也不能靠 JS 插件堆出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
