Tampermonkey屏幕锁定键脚本问题：锁定时保留按键交互

问题：现有Tampermonkey脚本在锁定页面时，会把左侧的锁定按钮也一起禁用，无法点击解锁。需要修改实现：锁定状态下仅允许点击锁定按钮，其他页面区域禁止交互，同时不影响页面内视频播放。

问题根源 #

原脚本通过设置document.body.style.pointerEvents = 'none'禁用整个页面交互，但这个样式会被子元素继承，导致锁定按钮也失去可点击性。

修改方案 #

放弃直接给body禁用指针事件的方式，改用全屏遮罩层实现：

• 创建一个覆盖整个页面的遮罩，锁定时显示，遮罩层拦截所有点击事件
• 将锁定按钮的层级设为比遮罩更高，确保按钮能被点击
• 解锁时隐藏遮罩，恢复页面正常交互

这样既实现了页面锁定，又保留了按钮的可点击性，同时不会影响视频播放（视频播放不受指针事件拦截影响）。

修改后的完整代码 #

// ==UserScript==
// @name         屏幕锁定钥匙
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  点击左侧钥匙按钮锁定/解锁页面，锁定时仅允许点击按钮，不影响视频播放
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 创建全屏遮罩层，用于拦截页面交互
    const mask = document.createElement('div');
    mask.id = 'lockMask';
    mask.style.position = 'fixed';
    mask.style.top = '0';
    mask.style.left = '0';
    mask.style.width = '100vw';
    mask.style.height = '100vh';
    mask.style.backgroundColor = 'rgba(0,0,0,0.1)'; // 半透明提示，可自行调整
    mask.style.pointerEvents = 'auto';
    mask.style.zIndex = '9998'; // 层级低于锁定按钮
    mask.style.display = 'none'; // 默认隐藏
    document.body.appendChild(mask);

    // 创建钥匙形锁定按钮
    const lockButton = document.createElement('div');
    lockButton.id = 'lockButton';
    lockButton.style.position = 'fixed';
    lockButton.style.left = '0';
    lockButton.style.top = '50%';
    lockButton.style.transform = 'translateY(-50%)';
    lockButton.style.width = '20px';
    lockButton.style.height = '20px';
    lockButton.style.backgroundColor = 'gray';
    lockButton.style.borderRadius = '50%';
    lockButton.style.cursor = 'pointer';
    lockButton.style.zIndex = '9999'; // 层级高于遮罩，确保能点击
    document.body.appendChild(lockButton);

    let isLocked = false;

    // 锁定按钮点击事件
    lockButton.addEventListener('click', function(event) {
        if (isLocked) {
            // 切换为解锁状态
            isLocked = false;
            lockButton.style.backgroundColor = 'gray';
            mask.style.display = 'none'; // 隐藏遮罩，恢复页面交互
        } else {
            // 切换为锁定状态
            isLocked = true;
            lockButton.style.backgroundColor = 'green';
            mask.style.display = 'block'; // 显示遮罩，拦截页面其他区域交互
        }
    });
})();

关键修改说明 #

• 新增lockMask遮罩层，锁定时通过display:block显示，拦截页面所有区域的点击操作
• 锁定按钮的zIndex设为9999，高于遮罩的9998，确保按钮在遮罩上方可正常点击
• 移除了对document.body.style.pointerEvents的修改，避免影响所有页面元素
• 遮罩使用半透明背景（可自行调整颜色或透明度），方便用户直观识别页面锁定状态

内容的提问来源于stack exchange，提问作者XY ZHAO