JavaScriptでオリジナルの右クリックメニューを表示する方法

JavaScriptでオリジナルの右クリックメニューを表示する方法のアイキャッチ画像

こんにちは。

今回は、デフォルトの右クリックを無効化して、オリジナルの右クリックを実装する方法です。

上のDEMOのような感じで、オリジナルの右クリックを実装します。

WEBサイトよりも、WEBアプリを制作する時に利用されますね。
例えば、DropboxやGmailで右クリックすると独自のメニューが表示されます。

実装方法

HTML

<body onContextmenu="return false;">
  <div class="my-contextmenu" id="js-contextmenu">
    <ul>
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
    </ul>
  </div>
  <script src="./script.js"></script>
</body>

CSS

.my-contextmenu {
  display: none;
  position: fixed;
  width: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px rgba(0,0,0,.2);
  z-index: 1000;
}
.my-contextmenu.show {
  display: block;
}
.my-contextmenu ul {
  list-style: none;
  padding: 10px 0;
}
.my-contextmenu ul li {
  padding: 4px 10px;
  font-size: 14px;
  color: #333;
}

JavaScript

(function(){
  var myContextMenu = document.getElementById('js-contextmenu');
  document.body.addEventListener('contextmenu',function(e){
    var posX = e.pageX;
    var posY = e.pageY;
    myContextMenu.style.left = posX+'px';
    myContextMenu.style.top = posY+'px';
    myContextMenu.classList.add('show');
  });
  document.body.addEventListener('click',function(){
    if(myContextMenu.classList.contains('show')) {
      myContextMenu.classList.remove('show');
    }
  })
}());

onContextmenu="return false;"

これで右クリックを無効化することができます。

addEventListener('contextmenu', function(){});

右クリックのイベントはこのように記述します。

デフォルトの右クリックが使えないと不便なことが多いので、やたらめったら使うべきではありませんね。

まあ、そんな感じです。