1.阻止浏览器鼠标右键默认行为
可以使用contextmenu事件监听用户的鼠标右键操作,在该事件中住址浏览器的默认行为
document.addEventListener('contextmenu', (e) => {
e.preventDefault();
})
然后重新写一个用户右键的dom,让用户点击,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.main {
width: 100%;
height: 100%;
background: #333;
}
#custom-menu {
display: none;
position: fixed;
z-index: 9999;
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
#custom-menu ul {
list-style: none;
}
#custom-menu ul li {
width: 100px;
height: 30px;
cursor: pointer;
}
#custom-menu ul li+li {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="main">
<div id="custom-menu">
<ul>
<li>娱乐</li>
<li>体育</li>
<li>新闻</li>
<li>游戏</li>
</ul>
</div>
</div>
<script>
document.addEventListener('contextmenu', (e) => {
e.preventDefault();
var customMenu = document.getElementById('custom-menu');
customMenu.style.display = 'block'; // 显示自定义的右键菜单
customMenu.style.left = event.clientX + 'px'; // 设置菜单的位置
customMenu.style.top = event.clientY + 'px'; // 设置菜单的位置
})
document.addEventListener('click', function (event) {
var customMenu = document.getElementById('custom-menu');
if (event.target !== customMenu && !customMenu.contains(event.target)) {
customMenu.style.display = 'none'; // 隐藏自定义的右键菜单
}
});
</script>
</body>
</html>
2.阻止用户打开开发者工具
加入以下代码,使用户打开开发者模式进入debugger模式
((function () {
var callbacks = [],
timeLimit = 50,
open = false;
setInterval(loop, 1);
return {
addListener: function (fn) {
callbacks.push(fn);
},
cancleListenr: function (fn) {
callbacks = callbacks.filter(function (v) {
return v !== fn;
});
}
}
function loop() {
var startTime = new Date();
debugger;
if (new Date() - startTime > timeLimit) {
if (!open) {
callbacks.forEach(function (fn) {
fn.call(null);
});
}
open = true;
window.stop();
alert('不要扒我了');
window.location.reload();
} else {
open = false;
}
}
})()).addListener(function () {
window.location.reload();
});
代码来源:奇迹秀官网:https://www.qijishow.com/