• 技术文章 >web前端 >前端问答

    javascript怎么隐藏右键

    藏色散人藏色散人2022-01-11 15:08:42原创216

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

    本文操作环境: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+'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;
    }

    推荐学习:《js基础教程

    以上就是javascript怎么隐藏右键的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript 隐藏右键
    上一篇:html5中hi标签是啥意思 下一篇:java javascript是什么
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 怎么右键打开vscode• jquery如何区分鼠标左键还是右键点击• html如何禁止右键• javascript怎么隐藏li
    1/1

    PHP中文网