本文详解如何用 tampermonkey 编写一个「屏幕锁钥匙」脚本——在锁定页面时禁用全局交互，同时确保钥匙按钮自身始终可点击，并保持视频等媒体播放不受影响。
本文详解如何用 tampermonkey 编写一个「屏幕锁钥匙」脚本——在锁定页面时禁用全局交互，同时确保钥匙按钮自身始终可点击，并保持视频等媒体播放不受影响。
在 Web 自动化与用户干预场景中，常需临时「冻结」页面交互（如防止误触、专注演示或辅助操作），但又不能牺牲控制入口的可用性。原脚本通过 document.body.style.pointerEvents = 'none' 实现全屏锁定，却意外导致自身创建的钥匙按钮也失效——这是因为 pointer-events: none 会继承并屏蔽所有子元素的鼠标事件，包括固定定位的钥匙。
核心解法在于「精准事件隔离」：在禁用
指针事件的同时，显式为钥匙元素重置 pointer-events: auto，使其脱离父级限制，成为唯一可交互区域。以下是优化后的完整脚本：// ==UserScript==
// @name Screen Lock Key
// @namespace http://tampermonkey.net/
// @version 0.2
// @description 可点击的屏幕锁钥匙：锁定时仅钥匙响应，页面其他区域不可交互，媒体播放不受影响
// @author You
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 创建钥匙按钮（精简为纯 CSS 绘制的钥匙轮廓，更直观）
const lockButton = document.createElement('div');
lockButton.id = 'screenLockKey';
lockButton.title = '点击切换锁定状态';
lockButton.style.cssText = `
position: fixed;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: linear-gradient(135deg, #555, #333);
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
cursor: pointer;
z-index: 99999;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: white;
font-weight: bold;
line-height: 1;
`;
lockButton.innerHTML = '?';
document.body.appendChild(lockButton);
let isLocked = false;
const toggleLock = () => {
if (isLocked) {
// 解锁：恢复全局交互
isLocked = false;
lockButton.style.background = 'linear-gradient(135deg, #777, #555)';
lockButton.textContent = '?';
document.body.style.pointerEvents = 'auto';
} else {
// 锁定：禁用 body 事件，但显式启用钥匙自身
isLocked = true;
lockButton.style.background = 'linear-gradient(135deg, #4CAF50, #2E7D32)';
lockButton.textContent = '?';
document.body.style.pointerEvents = 'none';
lockButton.style.pointerEvents = 'auto'; // ✅ 关键修复：覆盖继承行为
}
};
// 绑定点击事件（支持鼠标、触摸、键盘 Space/Enter）
lockButton.addEventListener('click', toggleLock);
lockButton.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggleLock();
}
});
lockButton.setAttribute('tabindex', '0'); // 支持键盘聚焦
})();
✅ 关键改进说明：
- 事件穿透修复：lockButton.style.pointerEvents = 'auto' 必须在 document.body.style.pointerEvents = 'none' 之后执行，确保样式层叠生效；
- 无障碍增强：添加 tabindex 和 keydown 监听，支持键盘操作（符合 WCAG 标准）；
- 视觉反馈升级：使用图标（?/?）与渐变色明确状态，提升可感知性；
- 防覆盖设计：z-index: 99999 避免被第三方弹窗遮挡（但仍需注意极端高 z-index 的页面元素）。
⚠️ 注意事项与局限性：
- 若页面存在 position: fixed/sticky 元素且 z-index > 99999，可能遮挡钥匙。建议在冲突页面中动态提升钥匙层级，或改用 document.documentElement 作为容器；
- pointer-events: none 不影响
- 此方案不阻止键盘输入（如 Tab 切换、Esc 等），如需完全禁用键盘，需额外监听 keydown 并 preventDefault()（需谨慎评估 UX 影响）。
该脚本已验证兼容 Chrome、Edge、Firefox 的最新稳定版 Tampermonkey。只需安装即可即刻使用——轻点钥匙，掌控交互权限。
