[JavaScript] 右クリックメニューを実装する

投稿日：2018年4月8日更新日：2018年5月2日

独自の右クリックメニューを実装するサンプルです。

サンプルソース

例）独自の右クリックメニューサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>右クリックメニューサンプル</title>
<script>
window.onload = function(){
  var menu = document.getElementById('conmenu');  //独自コンテキストメニュー
  var area = document.getElementById('area');     //対象エリア
  var body = document.body;                       //bodyエリア

  //右クリック時に独自コンテキストメニューを表示する
  area.addEventListener('contextmenu',function(e){
    menu.style.left = e.pageX + 'px';
    menu.style.top = e.pageY + 'px';
    menu.classList.add('on');
  });

  //左クリック時に独自コンテキストメニューを非表示にする
  body.addEventListener('click',function(){
    if(menu.classList.contains('on')){
      menu.classList.remove('on');
    }
  });
}
</script>
<style>
#conmenu{
  width:130px;
  background-color:#f0f0f0;
  border:1px solid #999999;
  display:none;
  position:fixed;
}

#conmenu.on{
  display:block;
}

#conmenu ul{
  list-style:none;
  margin:0px;
  padding:5px;
}
#area{
  width:400px;
  height:200px;
  background-color:#ddddff;
}
</style>
</head>
<body oncontextmenu="return false;">
<div id="conmenu">
  <ul>
    <li><a href="https://www.google.co.jp" target="_blank">Google</a></li>
    <li><a href="https://www.yahoo.co.jp/" target="_blank">Yahoo</a></li>
    <li><a href="https://www.goo.ne.jp/" target="_blank">goo</a></li>
  </ul>
</div>
<div id="area">このエリア上で右クリックしてください。</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>右クリックメニューサンプル</title>

window.onload = function(){

var menu = document.getElementById('conmenu'); //独自コンテキストメニュー

var area = document.getElementById('area'); //対象エリア

var body = document.body; //bodyエリア

//右クリック時に独自コンテキストメニューを表示する

area.addEventListener('contextmenu',function(e){

menu.style.left = e.pageX + 'px';

menu.style.top = e.pageY + 'px';

menu.classList.add('on');

});

//左クリック時に独自コンテキストメニューを非表示にする

body.addEventListener('click',function(){

if(menu.classList.contains('on')){

menu.classList.remove('on');

}

});

}

</script>

<style>

#conmenu{

width:130px;

background-color:#f0f0f0;

border:1px solid #999999;

display:none;

position:fixed;

}

#conmenu.on{

display:block;

}

#conmenu ul{

list-style:none;

margin:0px;

padding:5px;

}

#area{

width:400px;

height:200px;

background-color:#ddddff;

}

</style>

</head>

<ul>

<li><a href="https://www.google.co.jp" target="_blank">Google</a></li>

<li><a href="https://www.yahoo.co.jp/" target="_blank">Yahoo</a></li>

</ul>

</div>

<div id="area">このエリア上で右クリックしてください。</div>

</body>

</html>

解説

52行目で、標準の右クリックメニュー（コンテキストメニュー）を無効にしています。
13行目、53～59行目で、独自右クリックメニューを設定しています。
20行目で、左クリック時に右クリックメニューを消しています。

執筆者：とら