您好!欢迎来到资源一生!本站资源24小时自动发货,请放心选购,一次付费,终身下载,售后请联系客服!

HTML禁止鼠标右键方法总结大全,前端开发必备!

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

第一种:直接让右键失效

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

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

在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禁用鼠标右键点击事件

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

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

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

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

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

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

<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.onclick=function(e){

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

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

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

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

下载说明:

1.有任何问题请登陆用户中心后提交工单反馈: 登陆用户中心
2.请在右上角点击下载链接下载资源,如果下载文件夹下有“解压密码”的文本,以此为准,如果没有的话,压缩包就是没有密码或者密码是默认的zy13.cn;
3.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络转载,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除!
4.本站站内提供的所有可下载资源(软件等等)本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发);但本网站不能保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug;同时本站用户必须明白,【资源一生】对提供下载的软件等不拥有任何权利(本站原创和特约原创作者除外),其版权归该资源的合法拥有者所有。
5.本站所有资源均不提供相关技术服务,如果源码下载地址失效请 联系站长QQ进行补发。
资源一生 » HTML禁止鼠标右键方法总结大全,前端开发必备!

提供最优质的资源集合

立即查看 了解详情
赞助VIP 享更多特权,建议使用 QQ 登录
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡