javascript 自作の右クリックメニューを作成する

javascript 自作の右クリックメニューを作成する

javascriptで、contextmenuを使って自作の右クリックメニューを作成するサンプルコードを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

contextmenuイベント使い方

contextmenuイベントを使うと、右クリックのイベント取得でき
その処理の中で、
1.マウスの位置を取得してスタイルを設定
2.非表示から表示に変更
を行います。

サンプルコード

以下は、
1.デフォルトの 右クリックを禁止
2.指定した範囲で右クリック
3.自作の右クリックを表示
4.左クリックで非表示
するサンプルコードとなります。

※cssには「bootstrap material」を使用してます。

自作の右クリックが表示されていることが確認できます。