本文详解如何编写一个 Tampermonkey 脚本，在网页上创建一个固定位置的“钥匙形锁控按钮”，点击即可切换全局交互锁定状态；关键在于解决 pointer-events: none 连带禁用自身的问题，并确保视频播放等非交互行为不受影响。
本文详解如何编写一个 tampermonkey 脚本，在网页上创建一个固定位置的“钥匙形锁控按钮”，点击即可切换全局交互锁定状态；关键在于解决 `pointer-events: none` 连带禁用自身的问题，并确保视频播放等非交互行为不受影响。
在前端开发中，利用 CSS 的 pointer-events 属性快速屏蔽页面交互是一种常见技巧。但若直接对
应用 pointer-events: none，其所有子元素（包括你精心创建的锁控按钮）也会继承该行为——导致按钮本身无法点击，形成“锁死即失联”的逻辑死锁。要突破这一限制，核心思路是：在全局禁用指针事件的同时，显式为锁控按钮重置 pointer-events: auto，实现“局部穿透”。以下是优化后的完整 Tampermonkey 脚本，已通过多浏览器验证（Chrome、Edge、Firefox），支持任意网页：
// ==UserScript==
// @name Screen Lock Key
// @namespace http://tampermonkey.net/
// @version 0.2
// @description 在页面左侧添加可点击钥匙图标，一键锁定/解锁页面交互（不影响视频播放、滚动条可见性）
// @author You
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 创建钥匙形锁控按钮（简化为圆形，便于调试；可替换为 SVG 或背景图增强视觉）
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: #666;
border-radius: 50%;
cursor: pointer;
z-index: 2147483647; /* 使用最大安全整数，避免被第三方高 z-index 覆盖 */
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(); // 防止事件冒泡干扰（虽无父监听器，属良好实践）
if (isLocked) {
// 解锁：恢复全局交互
isLocked = false;
lockButton.style.background = '#666';
document.body.style.pointerEvents = 'auto';
} else {
// 锁定：禁用页面交互，但保留钥匙按钮可点击
isLocked = true;
lockButton.style.background = '#4CAF50';
document.body.style.pointerEvents = 'none';
lockButton.style.pointerEvents = 'auto'; // ✅ 关键修复：覆盖继承的 pointer-events
}
});
// 【可选增强】支持 Esc 键快速解锁（提升可用性）
document.addEventListener('keydown', function(e) {
if (isLocked && e.key === 'Escape') {
isLocked = false;
lockButton.style.background = '#666';
document.body.style.pointerEvents = 'auto';
}
});
})();
✅ 核心要点说明：
- pointer-events 继承机制：pointer-events: none 会阻止所有鼠标事件（click、hover、drag 等），且默认向下继承。因此必须显式为锁控按钮设置 pointer-events: auto 才能保证其始终可操作。
- z-index 安全值：使用 2147483647（32 位有符号整数上限）可最大限度避免被页面内其他元素遮挡，确保按钮始终位于最上层。
- 不影响媒体播放：pointer-events: none 仅控制用户输入事件，不会暂停视频、音频或动画，符合原始需求中“锁定期间视频继续播放”的要求。
- 视觉反馈与体验优化：添加了平滑颜色过渡（transition）、细微阴影（box-shadow）和更合理的边距（left: 8px），提升可用性。
⚠️ 注意事项与局限性：
- 若目标网页存在 position: fixed 元素且 z-index 显式设为 2147483647 或更高（极罕见），仍可能遮挡钥匙按钮。此时可考虑将按钮挂载至 document.documentElement（HTML 根节点）而非 document.body，并配合 inset 定位进一步增强鲁棒性。
- 该方案不阻止键盘焦点切换（如 Tab 导航），如需完全隔离交互，需额外监听 keydown 并 preventDefault() —— 但会显著降低可访问性，不推荐在通用场景中启用。
- 部分单页应用（SPA）在路由切换后可能动态重建 DOM，导致按钮丢失。如需持久化，可结合 MutationObserver 监听 body 变化并自动重挂载（进阶需求）。
此脚本轻量、零依赖、开箱即用，既满足“防误触”的实用目标，又体现了 CSS 事件模型与 DOM 层叠逻辑的精准运用——是前端自动化工具开发中兼具简洁性与工程思维的典型范例。
