网页如何禁止鼠标右键和F12,键盘另存为、粘贴、复制事件
2018-10-10 本文已影响59人
菜菜___
最近做的商用后台项目涉及到前端加密技术，为了保证前端页面展示的数据不被窃取，所以在js上做了一些处理，这些处理并不能完全杜绝有心之人窃取数据，只是加大他们操作的难度而已。
1.禁止浏览器右键事件。使用浏览器右键可以将网页保存下来，或者审查网页源代码，这是我们想避免的（当然，仍然可以通过浏览器右上角的工具栏打开开发者工具，这里可以判断下鼠标的光标位置，如果光标移动到导航栏及页面body之外的地方，我们可以选择把页面展示的元素清空，这样在控制台看见的源代码也没有展示出来的数据了）。
js实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>禁止鼠标右键事件</title>
</head>
<body>
<p>这里是一些内容,展示禁止鼠标右键事件
</p>
</body>
<script>
document.oncontextmenu = function(){
return false;
}
</script>
</html>
jquery实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>禁止鼠标右键事件</title>
</head>
<body>
<p>这里是一些内容,展示禁止鼠标右键事件
</p>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(function(){
$(document).contextmenu(function() {
return false
})
});
</script>
</html>
2.禁止F12事件，键盘的选择粘贴复制事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>禁止键盘粘贴复制</title>
</head>
<body>
<p>这里是一些内容
</p>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
function forbidKeyboard() {
$(document).keydown(function(e) {
/*9:Tab键, 17：Control键, 18:Alt键, 123:F12键, 83:S键*/
var keyboardCode = [9, 17, 18, 123];
for (i in keyboardCode) {
if (keyboardCode[i] == e.keyCode) {
return false;
}
}
if ((e.keyCode == 83) && (e.ctrlKey || e.metaKey)) {
return false;
}
});
/*禁止文本选择功能*/
$(document).bind("selectstart",function(){return false;});
}
$(function(){
forbidKeyboard();
});
</script>
</html>
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
