JavaScript | Canvasで右クリックメニューを表示しない方法
JavascriptでCanvasの要素内で右クリックメニュー（コンテキストメニュー）を表示しない方法を紹介しています。
キャンバス内でオリジナルの右クリックメニューやアクションを作成する場合に利用します。
Canvasで右クリックメニューを表示しない
addEventListener()で右クリックメニュー（コンテキストメニュー）をトリガーにしたイベントを実装して、デフォルトのイベントをキャンセルして表示しないようにした動作サンプルとサンプルコードになります。
See the Pen JavaScript | Get the event type by yochans (@yochans) on CodePen.
HTMLにはテスト用のテキストを<canvas>タグを設置しています。
<canvas></canvas>Javascriptを使って、右クリックメニュー（コンテキストメニュー）を表示しない様にする方法の動作サンプルとサンプルコードになります。
出力用の<canvas>タグはdocument.querySelector('canvas')で取得しています。
のイベントはaddEventListener()で「contextmenu」を指定しています。
デフォルトのコンテキストメニューイベントをキャンセルするにはevent.preventDefault()を指定します。
関数を定義する場合は以下のようになります。
let right_click_event_function = () => {
event.preventDefault();
};
document.querySelector(`canvas`).addEventListener(`contextmenu`, right_click_event_function, false);無名関数を利用する場合は以下のコードになります。
document.querySelector(`canvas`).addEventListener(`contextmenu`, () => {
event.preventDefault();
});