观点

先给出我的观点：前端的防趴是不能 100% 防御住的。不可能适配所有的范围环境，而且还有浏览器插件将禁用的组件进行恢复...

分享代码中有有部分是重复的，比如说屏蔽了键盘还屏蔽部分按键等，请自行测试优化。

PC 端

只允许用户进行左键和滚轮屏蔽键盘防打印下载页面到本地在打开跳回网站

移动端

主要是防御长按，移动端的操作绝大部分都离不开长按，但是很多浏览器是对媒体（图片）是失效的，比如说夸克浏览器，防住了文字但是对图片长按依然可以进行保存操作，微信浏览器则是对无法保存的图片进行截图处理，但是本网站中只要把触碰到图片的元素都会进行放大，所以微信只截图到一部分（不完整的）

代码

<script>
// 监听键盘事件
document.onkeydown = function(event) {
    // 检测是否按下 F12 或其他常用的开发者工具快捷键
    if (event.key === "F12" || (event.ctrlKey && event.shiftKey && event.key === "I") ||
        (event.ctrlKey && event.key === "U") || (event.ctrlKey && event.key === "S")) {
        event.preventDefault(); // 阻止默认行为
        event.stopPropagation(); // 防止事件传播
        while (true) {
            debugger;
        }
        return false; // 终止函数执行
    }

    event = event || window.event; // 兼容性处理
    event.preventDefault(); // 阻止默认行为
    event.stopPropagation(); // 防止事件传播
    return false; // 终止函数执行
};

// 监听窗口卸载事件
window.onbeforeunload = function(event) {
    // 检测鼠标是否在窗口外
    if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
        event.returnValue = ""; // 提示用户
        while (true) {
            debugger;
        }
    }
};

// 阻止右键菜单
document.oncontextmenu = function(event) {
    event.preventDefault(); // 阻止右键菜单显示
    event.stopPropagation(); // 防止事件传播
    while (true) {
        debugger;
    }
    return false; // 终止函数执行
};

// 监听复制事件
document.addEventListener('copy', function(event) {
    event.preventDefault(); // 阻止复制默认行为
    clearClipboard(); // 清空剪贴板
    while (true) {
        debugger;
    }
});

// 清空剪贴板的函数
function clearClipboard() {
    navigator.clipboard.writeText(''); // 清空剪贴板内容
    setTimeout(clearClipboard, 200); // 每200毫秒再次调用
}

// 监听打印事件
window.onbeforeprint = function(event) {
    event.preventDefault(); // 阻止打印默认行为
    while (true) {
        debugger;
    }
    return false; // 终止函数执行
};

// 阻止文本选择
document.onselectstart = function(event) {
    event.preventDefault(); // 阻止选择默认行为
    while (true) {
        debugger;
    }
    return false; // 终止函数执行
};

// 阻止拖拽事件
document.addEventListener('dragstart', function(event) {
    event.preventDefault(); // 阻止拖拽默认行为
    while (true) {
        debugger;
    }
    return false; // 终止函数执行
});

// 设置 body 的一些属性，阻止特定行为
document.body.setAttribute('oncontextmenu', 'return false;'); // 阻止右键菜单
document.body.setAttribute('ondragstart', 'return false;'); // 阻止拖拽
document.body.setAttribute('onselectstart', 'return false;'); // 阻止选择
document.body.setAttribute('onselect', 'document.selection.empty();'); // 阻止选择

//手机端屏蔽
document.addEventListener('touchstart', function(event) {
    event.preventDefault(); // 阻止默认行为
    while (true) {
        debugger;
    }
}, { passive: false });

// 检查当前主机是否在允许的列表中
var host = window.location.host; // 获取当前主机
var allowedHosts = [
    "www.tangshen.top", // 允许的主机
];

// 如果当前主机不在允许列表中，则重定向
if (allowedHosts.indexOf(host) === -1) {
    window.location.href = 'https://www.tangshen.top/'; // 重定向到指定地址
    while (true) {
        debugger;
    }
}
</script>

<style> 
@media print{ 
    body{display:none} // 打印时隐藏页面内容
} 
</style>

前端防趴手段代码分享

观点

PC 端

移动端

代码