网页交互需结构、时机、绑定方式三者对齐，否则事件静默失效；最常见原因是元素未加载进DOM导致document.getElementById()返回null，应使用DOMContentLoaded事件包裹绑定逻辑。
网页交互不是“加个 onclick 就完事”，而是结构、时机、绑定方式三者必须对齐。错一个，事件就静默失效。
为什么 document.getElementById() 绑定 click 没反应
最常见原因是元素还没加载进 DOM，document.getElementById() 返回 null，后续调用 addEventListener() 直接报错中断。这不是代码写错了，是执行太早。
- 别把 JS 脚本放在
<head>里（除非加defer） - 推荐方案：用
DOMContentLoaded事件包裹绑定逻辑，它在 HTML 解析完成、DOM 构建完毕后触发，比window.onload更快更准 - 快速验证：在控制台手动执行
document.getElementById('myBtn')，如果返回null，说明 DOM 查询时机不对
onclick 属性和 addEventListener 哪个该用
onclick 属性只能存一个函数，后赋值会覆盖前一个；addEventListener 支持同一元素、同一事件类型绑定多个处理函数，且能控制捕获/冒泡阶段——这是现代交互的底线能力。
- 内联写法如
<button onclick="handleClick()">适合原型调试或极简页面，但无法解耦、难测试、易污染 HTML - 动态创建的元素（比如用
document.createElement()插入的按钮）必须用addEventListener，否则内联属性根本没机会写入 - 要移除事件时，
addEventListener必须传入**同一个函数引用**，匿名函数无法被移除；建议用具名函数或变量存引用
contextmenu 事件为什么有时不触发
不是所有元素默认响应右键事件。contextmenu 在 disabled 的表单控件、contenteditable="false" 区域、以及 Shadow DOM 内部可能被拦截或忽略。
立即学习“前端免费学习笔记（深入）”；
- 确保目标元素是可交互的：比如用
<div tabindex="0">让普通容器获得焦点和右键响应能力 - 必须在回调里第一时间调用
event.preventDefault()，否则原生菜单会闪现并干扰自定义逻辑 - 不要用
oncontextmenu内联属性——它无法动态启用/禁用，也不支持选项参数（比如{ once: true }） - 若需全局右键菜单（如整页编辑模式），绑定到
document；若只针对表格行，绑定到table tbody更安全，避免误拦其他组件
touchstart/touchmove 怎么避免和页面缩放冲突
移动端双指手势默认触发页面级缩放，不是图片缩放。不干预的话，你的 touchmove 监听根本收不到多点坐标变化。
-
<meta name="viewport">必须包含user-scalable=yes和合理maximum-scale（比如5.0），否则所有 touch 事件会被系统屏蔽 - 在
touchmove回调开头立刻调用event.preventDefault()，但仅限两指操作时——单指滑动仍需保留滚动能力 - 别给图片加
touch-action: none，它会同时禁掉 pinch-zoom 和 pan，导致用户既不能缩放也不能拖拽 - 判断是否双指的关键是
event.touches.length === 2，单点时跳过缩放逻辑，避免误判
真正卡住人的从来不是语法，而是 DOM 存在性、事件流阶段、浏览器默认行为这三者的隐式依赖。每次事件不触发，先查元素是否存在、再看 preventDefault 是否漏调、最后确认绑定时机是否落在 DOMContentLoaded 之后。
