javascript該如何隱藏右鍵

javascript該如何隱藏右鍵，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

javascript隱藏右鍵的方法：1、打開相應的代碼文件；2、使用“window.oncontextmenu=function(e){e.preventDefault();}”方法禁用鼠標右鍵菜單即可。

本文操作環(huán)境：Windows7系統(tǒng)、javascript1.8.5、Dell G3電腦。

javascript怎么隱藏右鍵？

js設置或禁用鼠標右鍵菜單

當用戶點擊鼠標右鍵的時候oncontextmenu事件被觸發(fā)

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");
    //根據(jù)事件對象中鼠標點擊的位置，進行定位
    menu.style.left=e.clientX+'px';
    menu.style.top=e.clientY+'px';
    //改變自定義菜單的寬，讓它顯示出來
    menu.style.width='100px';
    menu.style.height='auto';
}
//鼠標左鍵任意位置單擊, 關閉右鍵菜單
window.onclick=function(e){
    //用戶觸發(fā)click事件就可以關閉了，因為綁定在window上，按事件冒泡處理，不會影響菜單的功能
    document.querySelector('#menu').style.height=0;
}

看完上述內(nèi)容，你們掌握javascript該如何隱藏右鍵的方法了嗎？如果還想學到更多技能或想了解更多相關內(nèi)容，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！