.html右键不能打开,10种HTML禁止鼠标右键方法，你知道几种？

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

第一种：直接让右键失效

在body标签中添加以下代码即可

οncοntextmenu=self.event.returnValue=false

完整代码如下：

第二种：让鼠标右键失效，但同时不能用鼠标选取页面上的内容

跟上面第一种差不多，同时“编辑->全选”也没有作用。

代码如下：

第三种:效果跟第一个一样，但是多了一个JS鼠标被按下事件

在body标签中加入下面的代码

οnkeydοwn="if(event.keyCode==27) return false;" οncοntextmenu="self.event.returnValue=false;"

然后在之前加入下面的代码

function rclick() {

if(document.all) {

if (event.button == 2){

event.returnvalue=false;

}

}

}

第四种：纯CSS禁用鼠标右键点击事件

在CSS样式表中加入以下代码

.rules{

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select: none;

-khtml-user-select: none;

user-select: none;

第五种：用CSS和js 禁止鼠标点击事件 加强浏览器兼容效果！

其实这么做无非就是尽可能的兼容多个浏览器

CSS代码部分

.rules{

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select: none;

-khtml-user-select: none;

user-select: none;

JS代码部分

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()'

第七种：这方法是纯JS。这个弊端比较明显，实用性也不是很好。代码如下

document.οncοntextmenu=new Function("event.returnValue=false;");

document.onselectstart=new Function("event.returnValue=false;");

第八种：这个方法直接禁止选择文本，文本都不给选择了，又谈何复制呢？

网友：嗯？不对啊，不是说禁止鼠标右键吗，这个算啥？

千羽：em......就是禁止复制呀！

不扯皮，代码如下

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.οnmοusedοwn=disableselect;

document.οnmοuseup=reEnable;

第九种：直接禁用键盘三个按键加禁止鼠标右键：shift,ctrl,alt. 代码如下

第十种 ：自定义鼠标右键菜单！

也是目前千羽所知道、想到的最后一种了。不过呢，这个办法很好用！不多说，代码如下

HTML部分，新建一个div盒子

功能1

功能2

功能3

功能4

功能5

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.οncοntextmenu=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.οnclick=function(e){

//用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能

document.querySelector('#menu').style.height=0;

总结：办法虽多，但是呢各有弊端。还是得各位自行体验了哈，千羽就不一一写出来了。写太多了，看着也烦呢！

最后，关注我获取更多前端知识，IT知识，编程知识！

举报/反馈