本文详解如何通过 css pointer-events 精准控制页面交互锁定范围，确保“钥匙”按钮在全局禁用状态下仍可点击，同时兼容视频播放等非交互性功能。
本文详解如何通过 css pointer-events 精准控制页面交互锁定范围，确保“钥匙”按钮在全局禁用状态下仍可点击，同时兼容视频播放等非交互性功能。
在开发浏览器端临时防误触工具时，一个常见需求是：用一个固定悬浮按钮（如钥匙图标）作为“屏幕锁开关”，点击后禁用页面其余区域的全部交互（点击、拖拽、表单输入等），但必须保留该按钮自身的可点击性——否则一旦锁死就无法解锁。原始脚本中直接对 document.body 设置 pointer-events: none 会导致其所有子元素（包括钥匙按钮）一并失效，这是典型的 CSS 继承陷阱。
核心解决方案在于层级覆盖式事件重启用：在全局禁用指针事件的同时，显式为钥匙元素单独设置 pointer-events: auto，从而突破继承限制。该方式轻量、无需 DOM 重排，且完全不影响
以下是优化后的完整 Tampermonkey 脚本（已验证兼容 Chrome/Firefox/Edge）：
// ==UserScript==
// @name Screen Lock Key
// @namespace http://tampermonkey.net/
// @version 0.2
// @description 悬浮钥匙按钮，点击切换全屏交互锁定/解锁状态；锁定时仅钥匙可点击，媒体播放不受影响。
// @author You
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 创建钥匙按钮（圆形灰色，悬停变绿）
const lockButton = document.createElement('div');
lockButton.id = 'screenLockKey';
lockButton.style.cssText = `
position: fixed;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background-color: #666;
border-radius: 50%;
cursor: pointer;
z-index: 2147483647; /* 使用最大安全整数，避免被第三方高zIndex覆盖 */
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
transition: background-color 0.2s;
`;
document.body.appendChild(lockButton);
let isLocked = false;
lockButton.addEventListener('click', function(e) {
e.stopPropagation(); // 阻止事件冒泡，避免意外触发 body 事件
if (isLocked) {
// 解锁：恢复全局交互
isLocked = false;
lockButton.style.backgroundColor = '#666';
document.body.style.pointerEvents = 'auto';
} else {
// 锁定：禁用 body 交互，但强制钥匙自身可点
isLocked = true;
lockButton.style.backgroundColor = '#4CAF50';
document.body.style.pointerEvents = 'none';
lockButton.style.pointerEvents = 'auto'; // 关键修复：穿透式启用
}
});
// 【增强健壮性】监听键盘 Escape 键快速解锁（可选）
document.addEventListener('keydown', function(e) {
if (isLocked && e.key === 'Escape') {
isLocked = false;
lockButton.style.backgroundColor = '#666';
document.body.style.pointerEvents = 'auto';
}
});
})();
✅ 关键改进说明：
- lockButton.style.pointerEvents = 'auto' 必须在 document.body.style.pointerEvents = 'none' 之后执行，确保样式优先级生效；
- 使用 z-index: 2147483647（CSS 最大安全整数）最大限度规避第三方脚本或页面样式覆盖风险；
- 添加 e.stopPropagation() 防止点击钥匙时意外触发可能绑定在 body 上的其他事件处理器；
- 新增 Escape 键快捷解锁支持，提升用户体验；
- 采用 cssText 批量设置样式，代码更紧凑，避免重复 .style.xxx 赋值。
⚠️ 注意事项与局限：
- 若页面存在 position: fixed/sticky 元素且 z-index 高于 2147483647（极罕见），可能遮挡钥匙按钮。此时需检查页面 CSS 并手动调整钥匙 z-index；
- pointer-events: none 不影响 :hover 伪类或 CSS 动画，但会阻止所有 JavaScript 事件（click, input, focus 等）；
- 视频/音频播放、滚动（若由 JS 主动触发）、
- 此方案不阻止键盘输入（如 Tab 切换焦点），如需完全禁用键盘，需额外监听 keydown 并 e.preventDefault() —— 但通常不推荐，因会破坏可访问性（a11y）。
该脚本已在多个主流网站实测有效，是轻量级防误触场景的理想实践。开发者可基于此结构进一步扩展：例如添加图标 SVG、状态持久化（localStorage）、多主题配色或与系统锁屏联动。
