首页 > web前端 > 前端问答 > javascript怎么隐藏右键

javascript怎么隐藏右键

藏色散人
发布: 2022-01-11 15:08:42
原创
1813 人浏览过

javascript隐藏右键的方法:1、打开相应的代码文件;2、使用“window.oncontextmenu=function(e){e.preventDefault();}”方法禁用鼠标右键菜单即可。

javascript怎么隐藏右键

本文操作环境:Windows7系统、javascript1.8.5、Dell G3电脑。

javascript怎么隐藏右键?

js设置或禁用鼠标右键菜单

当用户点击鼠标右键的时候oncontextmenu事件被触发

js禁用鼠标右键菜单

window.oncontextmenu=function(e){
    //取消默认的浏览器自带右键 很重要!!
    e.preventDefault();
}
登录后复制

js自定义鼠标右键菜单

html准备自定义菜单项

<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+&#39;px&#39;;
    menu.style.top=e.clientY+&#39;px&#39;;
    //改变自定义菜单的宽,让它显示出来
    menu.style.width=&#39;100px&#39;;
    menu.style.height=&#39;auto&#39;;
}
//鼠标左键任意位置单击, 关闭右键菜单
window.onclick=function(e){
    //用户触发click事件就可以关闭了,因为绑定在window上,按事件冒泡处理,不会影响菜单的功能
    document.querySelector(&#39;#menu&#39;).style.height=0;
}
登录后复制

推荐学习:《js基础教程

以上是javascript怎么隐藏右键的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板