JavaScriptで右クリックを非表示にする方法

JavaScript で右クリックを非表示にする方法: 1. 対応するコード ファイルを開きます; 2. "window.oncontextmenu=function(e){e.preventDefault();}" メソッドを使用して、右クリックメニュー。

この記事の動作環境: Windows 7 システム、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 中国語 Web サイトの他の関連記事を参照してください。