ネイティブ js カスタム右クリック メニュー

<!--スタートの右クリック メニューの構造-->
<div id="右メニュー" class="右メニュー">
 <ul>
  <li disabled="無効">
        <a href="#" >戻る (B)</a> 
        <span>Alt+左矢印</span></li>
  <li><a href="#" >進む (F)</a> <span>Alt+右矢印</span></li>
  <li><a href="#" >再読み込み (R)</a> <span>Ctrl+R</span></li>
 </ul>
 <ul>
  <li><a href="#" >名前を付けて保存 (A)...</a> <span>Ctrl+S</span></li>
        <li><a href="#" >印刷(P)..</a> <span>Ctrl+P</span></li>
  <li><a href="#" >プロジェクト (C)...</a> <span>Ctrl+R</span></li>
 </ul>
 <ul>
  <li><a href="#" >クソコードを表示 (V)</a> <span>Ctrl+U</span></li>
     <li><a href="#" >バカをチェック(N)</a> <span>Ctrl+Shift+L</span></li>
 </ul>
</div>
<!--右クリック メニューの構造の終了-->
  
<div class="box"></div>

*{
 マージン: 0;
 パディング: 0;
}
li{
 リストスタイル: なし;
}
.右メニュー{
 幅: 250ピクセル;
 背景: #fff;
 境界線: 1px 実線 #bababa;
 位置: 固定;
 ボックスのサイズ: 境界線ボックス;
 表示: なし;
}
.rightmenu ul{
 下境界線: 1px 実線 #e9e9e9;   
}
.rightmenu ul li{
 高さ: 30px;
 行の高さ: 30px;
 色: #000;
 パディング: 0 25px;
 ボックスのサイズ: 境界線ボックス;
 マージン: 2px 0;
     カーソル: デフォルト;
}
.rightmenu ul li:hover{
 背景: #ebebeb;
}
.rightmenu ul li a{
 フォントサイズ: 12px;
 色: #000;
 カーソル: デフォルト;
 テキスト装飾: なし;
}
.rightmenu ul li span{
 フロート: 右;
 フォントサイズ: 12px;
 色: #000;
}
。箱{
 幅: 100ピクセル;
 高さ: 100px;
 背景: 赤;
}

<スクリプト>
 document.addEventListener('DOMContentLoaded',function(){
 //取得 var rightMenu=document.getElementById('rightmenu');
 //1. まず、右ボタンのデフォルトの動作をオフにします。window.oncontextmenu=function(event){
  イベントをデフォルトにしない();
  //2. 右クリックの動作を設定する rightMenu.style.display="none"; //ブロックされたメニューをリセットする rightMenu.style.display="block";
  rightMenu.style.left=event.offsetX+'px';
   rightMenu.style.top=event.offsetY+'px';
  }
  //3. 実際のブラウザの右ボタンに合わせて、左ボタンで右クリックメニューをキャンセルできます document.onclick=function(event){
   rightMenu.style.display="なし";
  }
  //4. この関数は完璧ではなく、各 li に対して BOM イベントを記述する必要がありますが、ここでは今のところ記述していません //5. 注意深く確認すると、定義した右クリック メニューに右ボタンがある場合、小さな問題があることがわかります。自分でテストできます})
</スクリプト>