Tauri.js实现点击穿透悬浮窗口的技术求助

要实现置顶且点击穿透的悬浮层窗口，仅调用setIgnoreCursorEvents是不够的，需要结合窗口配置和API参数一起设置，以下是完整步骤：

1. 配置窗口基础属性（tauri.conf.json） #

在窗口配置中开启置顶、透明、无装饰等关键属性，确保窗口不抢焦点且不遮挡底层内容：

"windows": [
  {
    "title": "悬浮层窗口",
    "width": 800,
    "height": 600,
    "alwaysOnTop": true,          // 保持窗口在最上层
    "transparent": true,          // 启用透明背景，避免遮挡底层内容
    "decorations": false,         // 移除窗口标题栏等装饰
    "focusable": false,           // 窗口不获取焦点，底层操作不受影响
    "skipTaskbar": true,          // 可选：不在任务栏显示窗口
    "url": "index.html"
  }
]

2. 前端启用点击穿透API #

调用setIgnoreCursorEvents时必须传入forward: true参数，这样光标事件才会转发到底层窗口，而不是单纯忽略：

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

// 页面加载完成后初始化点击穿透
window.addEventListener('DOMContentLoaded', async () => {
  await appWindow.setIgnoreCursorEvents(true, { forward: true })
})

3. CSS确保背景透明 #

在前端样式中设置页面背景为透明，避免默认背景遮挡底层内容：

body {
  margin: 0;
  padding: 0;
  background: transparent;
  /* 示例：添加红框匹配你的需求 */
  border: 2px solid red;
  box-sizing: border-box;
}

注意事项 #

• 不同平台可能存在细微差异，若Windows下仍有问题，可检查是否开启了硬件加速（Tauri默认开启，一般无需调整）
• 若需要临时关闭点击穿透，可调用appWindow.setIgnoreCursorEvents(false)

内容的提问来源于stack exchange，提问作者Asgarrrr