[JavaScript] 右クリック時に処理を行う（oncontextmenu）

投稿日：2018年7月22日

右クリック時に処理を行うには、oncontextmenuイベントを使用します。

サンプルソース

例）右クリックすると画面にメッセージを表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>右クリック時に処理を行うサンプル</title>
<script>
window.onload = function(){
  document.oncontextmenu = function(){
    var obj = document.getElementById("d1");
    obj.innerText = "右クリックされました。";
    return false;  //標準の右クリックメニューを表示しない
  }
}
</script>
</head>
<body>
  <div id="d1"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>右クリック時に処理を行うサンプル</title>

window.onload = function(){

document.oncontextmenu = function(){

var obj = document.getElementById("d1");

obj.innerText = "右クリックされました。";

return false; //標準の右クリックメニューを表示しない

}

</script>

</head>

<body>

</body>

</html>

解説

右クリック時にはoncontextmenuイベントハンドラが呼ばれます。
oncontextmenuイベントでは return falseを返すと、標準の右クリックメニューは表示されなくなります。

執筆者：とら