出于某种原因，我们不想让别人复制粘贴或者审核元素查看我们的代码格式，总会用到各种各样的禁用鼠标右键代码及方法。那么，你知道几种呢？

第一种：直接让右键失效

在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鼠标被按下事件

在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样式表中加入以下代码

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代码部分

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。这个弊端比较明显，实用性也不是很好。

代码如下

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.

代码如下

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;
  }
}

总结：办法虽多，但是呢各有弊端。