ZeroPlus Media > Web制作 > JavaScript > 【jQuery】右クリックで発火するcontextmenuの使い方

【jQuery】右クリックで発火するcontextmenuの使い方

JavaScript

2022/04/05

2023/05/06

jQueryでは右クリックでイベントが発火するcontextmenuがあります。

オリジナルで右クリックメニューを表示させることもできる便利なイベントです。この記事では「contextmenuイベントの使い方」について解説していきます。

この記事で身につく内容

jQueryのcontextmenuイベントの使い方

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

contextmenuは右クリックで発火するイベント

contextmenu()はjQueryのイベントの一つ。右クリックでイベントを発火することができます。

基本書式は次のようになります。

基本書式

$('セレクタ').contextmenu(function(){
  // 処理の内容を記述
});

実際にコードを当てはめると下記のようになります。

  <button id="js-more">右クリック！</button>

const more = $('#js-more');

more.contextmenu(function () {
  alert('ok');
});

出力結果

See the Pen contextmenu by ZeroPlus (@zeroplus-programming) on CodePen.

ボタンを左クリックしてもalertは発火しませんが、右クリックすればalertイベントが発火します。

このように、contextmenu()は左クリックのイベントと分けたいときに便利です。

右クリックでオリジナルメニューを表示

contextmenu()を使えば、右クリックでオリジナルメニューを表示することができます。

コードは次のようになります。

右クリックでオリジナルメニューのサンプルコード

  <button id="js-more">右クリック！</button>
  <ul class="menu">
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="main.js"></script>

ul {
  display: none;
  position: fixed;
  left: 50px;
  top: 50px;
  right: 0;
  width: 300px;
  height: auto;
  background: gray;
}

ul li {
  cursor: pointer;
}

const more = $('#js-more');
more.contextmenu(function () {
  $('.menu').css('display', 'block');
  return false;
});

more.click(function () {
  $('.menu').css('display', 'none');
});

出力結果

See the Pen contextmenu-menu by ZeroPlus (@zeroplus-programming) on CodePen.

コードの内容としては、menuクラスをCSSで初期状態は非表示、右クリックしたらCSSメソッドによって表示・非表示を切り替えるようにしています。

デフォルトで表示される右クリックメニューは、return false;で表示されないようにしています。

一度表示されたmenuクラスは、ボタンを左クリックするとclickイベントによって非表示になります。