首頁  >  文章  >  web前端  >  javascript怎麼隱藏右鍵

javascript怎麼隱藏右鍵

藏色散人
藏色散人原創
2022-01-11 15:08:121679瀏覽

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+'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