文章目录[隐藏]
出于某种原因，我们不想让别人复制粘贴或者审核元素查看我们的代码格式，总会用到各种各样的禁用鼠标右键代码及方法。那么，你知道几种呢？下面是千羽总结的较为完整的方法大全
在body标签中添加以下代码即可
oncontextmenu=self.event.returnValue=false
完整代码如下：
<body oncontextmenu=self.event.returnValue=false>
跟上面第一种差不多，同时“编辑->全选”也没有作用。
代码如下：
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onbeforecopy="return false" oncopy=document.selection.empty() onselect=document.selection.empty()>
在body标签中加入下面的代码
onkeydown="if(event.keyCode==27) return false;" oncontextmenu="self.event.returnValue=false;"
然后在</head>之前加入下面的代码
<script language="javascript">
function rclick() {
if(document.all) {
if (event.button == 2){
event.returnvalue=false;
}
}
}
</script>
在CSS样式表中加入以下代码
<style>
.rules{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
</style>
其实这么做无非就是尽可能的兼容多个浏览器
CSS代码部分
<style>
.rules{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
</style>
JS代码部分
<script>
document.body.onselectstart = document.body.ondrag = function(){return false;}
同样的，使用方法也是在body标签中加入以下代码
οncοntextmenu='return false'
οndragstart='return false'
onselectstart ='return false'
οnselect='document.selection.empty()'
οncοpy='document.selection.empty()'
onbeforecopy='return false'
οnmοuseup='document.selection.empty()'
<script language="JavaScript">
document.οncοntextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");
网友：嗯？不对啊，不是说禁止鼠标右键吗，这个算啥？
千羽：em......就是禁止复制呀！
不扯皮，代码如下
<script type="text/javascript">
var omitformtags=["input", "textarea", "select"];
omitformtagsomitformtags=omitformtags.join("|");
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1){
return false;
function reEnable(){
return true;
if (typeof document.onselectstart!="undefined"){
document.onselectstart=new Function ("return false");
}else{
document.onmousedown=disableselect;
document.onmouseup=reEnable;
<script language="javascript" type="text/javascript">
<!--
function key(){
if(event.shiftKey){
window.close();}
//禁止shift
if(event.altKey){
//禁止alt
if(event.ctrlKey){
//禁止ctrl
return false;}
//document.onkeydown=key;
if (window.Event)
document.captureEvents(Event.MOUSEUP);
//swordmaple javascript article.
function nocontextmenu(){
event.cancelBubble = true
event.returnValue = false;
function norightclick(e){
if (window.Event){
if (e.which == 2 || e.which == 3)
else
if (event.button == 2 || event.button == 3){
//禁止右键
document.oncontextmenu = nocontextmenu; // for IE5+
document.onmousedown = norightclick; // for all others
//-->
也是目前千羽所知道、想到的最后一种了。不过呢，这个办法很好用！不多说，代码如下
HTML部分，新建一个div盒子
<div id="menu">
<div class="menu">功能1</div>
<div class="menu">功能2</div>
<div class="menu">功能3</div>
<div class="menu">功能4</div>
<div class="menu">功能5</div>
</div>
CSS部分，设置菜单项的样式
#menu{
width: 0; /*设置为0 隐藏自定义菜单*/
height: 125px;
overflow: hidden; /*隐藏溢出的元素*/
box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
position: absolute; /*自定义菜单相对与body元素进行定位*/
.menu{
width: 130px;
height: 25px;
line-height: 25px;
padding: 0 10px;
JS部分，用来控制菜单项的显示与隐藏
window.oncontextmenu=function(e){
//取消默认的浏览器自带右键 很重要！！
e.preventDefault();
//获取我们自定义的右键菜单
var menu=document.querySelector("#menu");
//根据事件对象中鼠标点击的位置，进行定位
menu.style.left=e.clientX+'px';
menu.style.top=e.clientY+'px';
//改变自定义菜单的宽，让它显示出来
menu.style.width='100px';
menu.style.height='auto';
//鼠标左键任意位置单击, 关闭右键菜单
window.>
//用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
document.querySelector('#menu').style.height=0;
总结：办法虽多，但是呢各有弊端。还是得各位自行体验了哈，小编就不一一写出来了。写太多了，看着也烦呢！
最后，关注我获取更多前端知识，IT知识，编程知识！