マウスクリックを透過させる（クリックスルー）

ウィンドウをクリックしても反応せず、背後のウィンドウやデスクトップに操作が伝わる「クリックスルー（Click-through）」を実現する方法を紹介します。

オーバーレイツールや、デスクトップマスコットなど、操作の邪魔にならないアプリを作成する場合に必須の機能です。
マウスイベントの無視設定 (IgnoreCursorEvents) を動的に切り替える手順について解説します。

前提条件

Permissions (権限) の設定

src-tauri/capabilities/default.json に以下の権限を追加します。

{
  "permissions": [
    ...,
    "core:window:allow-set-ignore-cursor-events",
    "core:window:default"
  ]
}

1. フロントエンドから変更する (TypeScript)

setIgnoreCursorEvents メソッドを使用します。

サンプルコード

import { getCurrentWindow } from '@tauri-apps/api/window';

const appWindow = getCurrentWindow();

// クリックを透過させる (マウス操作を受け付けない)
await appWindow.setIgnoreCursorEvents(true);

// 元に戻す (マウス操作を受け付ける)
await appWindow.setIgnoreCursorEvents(false);

注意点

* クリックスルーを有効 (true) にすると、そのウィンドウ上のボタンやリンクは一切クリックできなくなります。
* 元に戻すための手段（ショートカットキーや、別のウィンドウからの制御、あるいは一定時間後に戻すタイマーなど）を実装しておかないと、操作不能になる可能性があるため注意してください。

参考リンク

* setIgnoreCursorEvents

2. バックエンドから変更する (Rust)

use tauri::Manager;

#[tauri::command]
fn set_click_through(app_handle: tauri::AppHandle, enable: bool) {
    if let Some(window) = app_handle.get_webview_window("main") {
        window.set_ignore_cursor_events(enable).unwrap();
    }
}