如何让alwaysOnTop为true的透明Tauri应用支持非图片区域窗口穿透交互？

当然可行，核心是通过Tauri的窗口API结合前端DOM事件拦截，精准控制点击事件的穿透逻辑。以下是具体实现步骤：

1. 配置窗口基础属性 #

首先在tauri.conf.json的窗口配置中开启透明、置顶和无装饰：

{
  "windows": [
    {
      "title": "透明悬浮层",
      "width": 800,
      "height": 600,
      "transparent": true,
      "alwaysOnTop": true,
      "decorations": false
    }
  ]
}

同时要确保页面根元素（如body）设置为透明背景，避免默认背景遮挡下层窗口：

body {
  margin: 0;
  padding: 0;
  background: transparent;
}

2. 实现点击穿透逻辑 #

通过监听页面点击事件，判断点击目标是否为图片/画布区域，若非目标区域则触发点击穿透：

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

document.body.addEventListener('click', async (e) => {
  // 根据实际DOM结构调整判断条件，比如你的图片容器类名、画布ID等
  const isInteractiveTarget = e.target.tagName === 'IMG' || e.target.tagName === 'CANVAS';
  
  if (!isInteractiveTarget) {
    // 临时启用点击穿透，让下层窗口接收事件
    await appWindow.setIgnoreCursorEvents(true);
    // 延迟恢复监听，避免影响后续交互
    setTimeout(async () => {
      await appWindow.setIgnoreCursorEvents(false);
    }, 10);
  }
});

3. 优化悬浮交互体验 #

可以根据鼠标位置动态切换穿透状态，让用户更直观感知可交互区域：

const interactiveElements = document.querySelectorAll('img, canvas');

interactiveElements.forEach(el => {
  // 鼠标悬浮到可交互区域时，关闭穿透
  el.addEventListener('mouseenter', async () => {
    await appWindow.setIgnoreCursorEvents(false);
  });
  // 鼠标离开时，重新开启穿透
  el.addEventListener('mouseleave', async () => {
    await appWindow.setIgnoreCursorEvents(true);
  });
});

注意事项 #

• 若使用Canvas绘制图片，需要额外判断点击位置的像素透明度（通过getImageData获取像素值），确保只有画布内有内容的区域才响应点击
• 不同平台对透明窗口和点击穿透的支持存在细微差异，需在目标系统上测试验证

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