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>

onContextmenu="return false;"

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

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;
}

CSSでそれっぽくデザインします。

JavaScript

(function(){
  const myContextMenu = document.getElementById('js-contextmenu');

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

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

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

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

右クリックができないことで、閲覧者にどのような不便があるかを考えて実装する必要があります。