右クリックメニューを無効化する

Recipe ID: front-011

アプリらしさを高めるために、右クリックメニュー(コンテキストメニュー)を無効化する方法を解説します。
開発中はデバッグに便利ですが、リリース時には無効化するのが一般的です。

フロントエンドでの実装

JavaScript で contextmenu イベントをキャンセルします。

// main.ts などのエントリーポイント
window.addEventListener('contextmenu', (e) => {
  // 開発ビルド以外(本番環境)では無効化する例
  // ※ Vite を使用している場合。他のバンドラの場合は process.env.NODE_ENV === 'production' など適宜変更してください
  if (import.meta.env.PROD) {
    e.preventDefault();
  }
});

import.meta.env で型エラーが出る場合は、src/vite-env.d.ts というファイルを作成して以下を記述するか、tsconfig.jsoncompilerOptions.types"vite/client" を追加してください。

/// <reference types="vite/client" />

Web ページ上の一部の要素(画像保存など)だけ許可したい場合は、イベントターゲットを確認して条件分岐します。

Rust 側での設定 (推奨)

Rust 側で初期化スクリプトとして注入することで、JS が読み込まれる前やエラー時でも確実に無効化できます。
または tauri.conf.json で設定できる場合もありますが、以下のコードが確実です。

// main.rs
use tauri::Manager; // 必須

fn main() {
    tauri::Builder::default()
        .setup(|app| {
             let window = app.get_webview_window("main").unwrap();
             // JS 注入
             let script = "window.addEventListener('contextmenu', e => e.preventDefault());";
             window.eval(script).unwrap();
             Ok(())
        })
        // ...
}

※ v2 では initialization_script メソッドが WebviewWindowBuilder にあります。