51工具盒子出于某种原因，我们不想让别人复制粘贴或者审核元素查看我们的代码格式，总会用到各种各样的禁用鼠标右键代码及方法。那么，你知道几种呢？
第一种：直接让右键失效 {#第一种：直接让右键失效}
在body标签中添加以下代码即可
|-----------|----------------------------------------------------|
| 1 | oncontextmenu=self.event.returnValue=false |
完整代码如下：
|-----------|-----------------------------------------------------------|
| 1 | <body oncontextmenu=self.event.returnValue=false> |
第二种：让鼠标右键失效，但同时不能用鼠标选取页面上的内容 {#第二种：让鼠标右键失效，但同时不能用鼠标选取页面上的内容}
跟上面第一种差不多，同时"编辑->全选"也没有作用。
代码如下：
|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 | <body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onbeforecopy="return false" oncopy=document.selection.empty() onselect=document.selection.empty()> |
第三种:效果跟第一个一样，但是多了一个JS鼠标被按下事件 {#第三种-效果跟第一个一样，但是多了一个JS鼠标被按下事件}
在body标签中加入下面的代码
|-----------|-------------------------------------------------------------------------------------------------------|
| 1 | onkeydown="if(event.keyCode==27) return false;" oncontextmenu="self.event.returnValue=false;" |
然后在之前加入下面的代码
|---------------------------|------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 | <script language="javascript"> function rclick() { if(document.all) { if (event.button == 2){ event.returnvalue=false; } } } </script> |
第四种：纯CSS禁用鼠标右键点击事件 {#第四种：纯CSS禁用鼠标右键点击事件}
在CSS样式表中加入以下代码
|---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 | <style> .rules{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } </style> |
第五种：用CSS和js 禁止鼠标点击事件 加强浏览器兼容效果！ {#第五种：用CSS和js-禁止鼠标点击事件-加强浏览器兼容效果！}
其实这么做无非就是尽可能的兼容多个浏览器
CSS代码部分
|---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 | <style> .rules{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } </style> |
JS代码部分
|---------------|-----------------------------------------------------------------------------------------------------------|
| 1 2 3 | <script> document.body.onselectstart = document.body.ondrag = function(){return false;} </script> |
第六种：这方法也是第一种方法的升级版、加强版！！！ {#第六种：这方法也是第一种方法的升级版、加强版！！！}
同样的，使用方法也是在body标签中加入以下代码
|-----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 | ο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()' |
第七种：这方法是纯JS。这个弊端比较明显，实用性也不是很好。 {#第七种：这方法是纯JS。这个弊端比较明显，实用性也不是很好。}
代码如下
|-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | <script language="JavaScript"> document.οncοntextmenu=new Function("event.returnValue=false;"); document.onselectstart=new Function("event.returnValue=false;"); </script> |
第八种：这个方法直接禁止选择文本，文本都不给选择了，又谈何复制呢？ {#第八种：这个方法直接禁止选择文本，文本都不给选择了，又谈何复制呢？}
|------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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> |
第九种：直接禁用键盘三个按键加禁止鼠标右键：shift,ctrl,alt. {#第九种：直接禁用键盘三个按键加禁止鼠标右键：shift-ctrl-alt}
代码如下
|---------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <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 } } } } } </script> //--> |
第十种 ：自定义鼠标右键菜单！ {#第十种-：自定义鼠标右键菜单！}
也是目前千羽所知道、想到的最后一种了。不过呢，这个办法很好用！不多说，代码如下
HTML部分，新建一个div盒子
|-----------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 | <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部分，设置菜单项的样式
|---------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | #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部分，用来控制菜单项的显示与隐藏
|---------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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.onclick=function(e){ //用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能 document.querySelector('#menu').style.height=0; } } |
总结：办法虽多，但是呢各有弊端。
