display: none 的元素不在渲染树中，不占布局、无几何信息、不响应任何事件；visibility: hidden 仍占位且可访问但不响应事件；pointer-events: none 仅禁用鼠标事件，键盘事件可能生效。
display: none 的元素根本不在渲染树里，浏览器连它是否存在都不“知道”，自然不会派发任何事件。
为什么 click、focus、blur 都不触发
元素设了 display: none 后，浏览器在布局阶段就把它从渲染树中剔除——它没有几何信息（getBoundingClientRect() 返回全零）、不占文档流、不参与绘制，更不会接收鼠标或键盘事件。这不是“被挡住”或“被遮盖”，是彻底“消失”了。
常见错误现象包括：
- 给
display: none元素绑的click监听器完全没反应 - 用 JS 临时设
el.style.display = 'block'再立刻el.focus()，结果焦点没落到目标上（因为浏览器还没完成重排） - 表单控件设了
display: none，但submit时它的值仍被提交（DOM 存在，只是不可见）——这说明事件机制和表单数据收集是两套逻辑
visibility: hidden 和 pointer-events: none 的区别
visibility: hidden 元素仍在渲染树中、占位、可被 JS 访问（offsetHeight 有值），但它不响应任何事件（包括 click、hover、focus）；pointer-events: none 则只禁用鼠标事件，键盘事件（如 Tab 进入）仍可能生效，且元素视觉照常显示（除非配合 opacity: 0）。
关键差异：
-
visibility: hidden→ 不触发事件，但会阻止子元素继承事件（除非子元素显式设visibility: visible） -
pointer-events: none→ 鼠标穿透，但focus、keydown等仍可能触发（尤其当元素有tabindex） -
display: none→ 所有事件全无，且无法做 CSS 过渡
想隐藏又保留事件响应？别用 display: none
如果需要元素视觉隐藏但事件仍可触发（比如无障碍聚焦、键盘导航），必须避开 display: none：
- 用
opacity: 0+pointer-events: none：视觉消失、鼠标事件禁用，但focus可能还在（需检查tabindex） - 用
position: absolute+left: -9999px：移出视口，保留 DOM 结构和事件能力，适合屏幕阅读器 - 用
clip-path: inset(100%)：裁剪到不可见，元素仍在流内、可聚焦、可监听事件
注意：visibility: hidden 虽然占位，但明确不响应事件——这点常被误认为“只是看不见”，实际它比 display: none 更彻底地切断交互链。
blur 比 click 快？其实是事件时机错位
典型场景：输入框失焦（blur）时设 display: none 下拉列表，结果下拉项的 click 失效。原因不是 blur “更快”，而是鼠标抬起动作发生在 display: none 执行后，此时元素已退出渲染树，浏览器直接丢弃该次点击。
解决办法：
- 把
click改成mousedown：按下时事件已注册，即使随后隐藏也不影响 - 延迟隐藏：在
blur回调里加setTimeout(() => { el.style.display = 'none' }, 0)，让点击事件先冒泡完成 - 换用
visibility: hidden+pointer-events: none：保持元素在树中，避免事件链中断
真正容易被忽略的是：事件是否触发，取决于元素在事件触发瞬间是否存在于渲染树中——而不是你“打算什么时候隐藏它”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
