:fullscreen伪类无法触发退出提示，因为它仅匹配全屏状态而不提供退出事件钩子；浏览器禁止JS阻塞或拦截退出行为，只能通过CSS显示非模态提示并监听fullscreenchange事件同步状态。
为什么:fullscreen伪类无法直接触发退出提示？
因为:fullscreen只是状态匹配器，不是事件监听器——它只在元素处于全屏时生效，但不提供“即将退出”或“用户点了ESC/退出按钮”的钩子。你不能靠它弹出确认框或拦截退出行为。浏览器出于安全和用户体验考虑，禁止JS在全屏退出前阻塞或询问用户。
如何在全屏状态下显示自定义退出提示（非阻塞）？
可行做法是：利用:fullscreen配合CSS显示提示层，同时监听fullscreenchange事件做状态同步。注意提示必须是非模态、不可交互的视觉辅助，不能含confirm()或event.preventDefault()（后者对退出无效）。
- 用
:fullscreen给全屏容器加一个position: relative，再在其内部绝对定位提示文字或按钮 - 提示文案建议用“按ESC或点击×退出全屏”，避免暗示可取消退出
- 确保提示层
z-index足够高，且不遮挡关键操作区域（如视频控制栏） - 监听
document.addEventListener('fullscreenchange', ...)来动态显示/隐藏提示，避免仅靠CSS导致状态滞后
/* 示例：为全屏的video元素添加退出提示 */
video:fullscreen {
position: relative;
}
video:fullscreen::after {
content: "按 ESC 退出全屏";
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(0,0,0,0.7);
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 14px;
}
常见错误：把:fullscreen当事件用或试图拦截退出
典型误用包括：document.querySelector(':fullscreen').addEventListener('click', ...)（语法错误，:fullscreen不是元素）；或在fullscreenchange里调用event.preventDefault()（无效，该事件不可取消）；或用beforeunload监听全屏退出（完全不触发）。
-
:fullscreen选择器只能用于CSS或document.querySelector(':fullscreen')获取当前全屏元素，不能绑定事件 - 退出全屏是用户主动行为，没有“before”阶段可拦截，任何阻止尝试都会被忽略
- 移动端Safari不支持
:fullscreen伪类（需用:-webkit-full-screen等私有前缀），且其全屏API受限更严
真正可控的交互点：提供显式退出按钮
唯一可靠方式是自己画一个退出按钮，用document.exitFullscreen()触发退出，并在按钮上明确标注“退出全屏”。这样既符合用户预期，又避开浏览器限制。
- 按钮需放在全屏内容内，且用
pointer-events: auto确保可点击（有些全屏场景会重置指针事件） - 退出前可执行清理逻辑（如暂停视频、保存临时状态），但不能延迟或阻止退出本身
- 别忘了兼容旧版：检查
document.fullscreenElement是否存在，再调用对应退出方法（exitFullscreen/webkitExitFullscreen等）
全屏退出提示的本质是引导而非控制——浏览器把决定权完全交给用户，能做的只有清晰传达操作方式和及时响应状态变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
