Electron.js拖拽窗口致点击事件失效及Windows布局偏移问题求助

我基于Electron.js开发一款带透明背景、可拖拽的窗口应用，要求点击窗口内图片时播放音频。目前用html元素设置-webkit-app-region: drag实现拖拽，MacOS上正常，但Windows下出现布局偏移，且图片的点击事件完全失效。

相关代码 #

HTML代码

<body>
<div id="wrapper">
    <img id="duck" src="assets/ducks/duck.png">
    <audio id="krik" preload="auto" src="assets/krik.mp3"></audio>
    <div id="callout">Hello!</div>
</div>
</body>

CSS代码

html {
  -webkit-app-region: drag;
}
*{
  -moz-user-select: none;
  -o-user-select:none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#duck {
  position: relative;
  height: 9.5rem;
  transition: all ease-in-out;
  transition-duration: 1s;
  animation: rubber-ducky infinite linear;
  animation-duration: 10s;
}
}

script.js代码

let duck = document.getElementById('duck')
duck.addEventListener('click', () => {
    audio.play();
})

index.js代码

const createDuckWindow = () => {
    duckWindow = new BrowserWindow({
        frame: 0,
        hasShadow: false,
        transparent: true,
        backgroundColor: "rgba(255,0,0,0)",
        autoHideMenuBar: true,
        resizable: false,
        width: 300,
        height: 200,
        x: 0,
        y: 0,
        minimizable: false,
        webPreferences: {
            backgroundThrottling: false,
            nodeIntegration: true,
            contextIsolation: false
        }
    })
    duckWindow.setAlwaysOnTop(true, "screen-saver");
    duckWindow.setVisibleOnAllWorkspaces(true, {visibleOnFullScreen: true});
    duckWindow.loadFile(path.join(__dirname, 'index.html'));
};

请问如何规避该问题？是否有其他实现窗口拖拽且不影响点击事件的方法？

核心问题分析 #

Windows下给根元素（html）设置-webkit-app-region: drag会触发两个系统级问题：

1. 窗口内容被系统拖拽逻辑强制偏移，导致布局错位；
2. 拖拽区域会拦截所有鼠标事件，子元素的点击、hover等交互完全失效。

修复方案 #

1. 拆分拖拽区域与交互区域

不要给整个页面设置拖拽，而是单独创建一个全屏拖拽容器，放在内容下方不遮挡交互，同时给可点击元素添加no-drag属性放行事件。

修改后的HTML：

<body>
<div id="drag-area"></div> <!-- 新增全屏拖拽容器 -->
<div id="wrapper">
    <img id="duck" src="assets/ducks/duck.png">
    <audio id="krik" preload="auto" src="assets/krik.mp3"></audio>
    <div id="callout">Hello!</div>
</div>
</body>

修改后的CSS：

/* 全屏拖拽容器，放在内容下方 */
#drag-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-app-region: drag;
  z-index: -1;
}

*{
  -moz-user-select: none;
  -o-user-select:none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#duck {
  position: relative;
  height: 9.5rem;
  transition: all ease-in-out;
  transition-duration: 1s;
  animation: rubber-ducky infinite linear;
  animation-duration: 10s;
  -webkit-app-region: no-drag; /* 允许点击交互 */
}

2. 调整窗口配置解决Windows布局偏移

给BrowserWindow添加useContentSize: true，让窗口尺寸严格匹配内容尺寸，避免Windows系统的自动偏移：

修改index.js中的窗口配置：

duckWindow = new BrowserWindow({
    frame: 0,
    hasShadow: false,
    transparent: true,
    backgroundColor: "rgba(255,0,0,0)",
    autoHideMenuBar: true,
    resizable: false,
    width: 300,
    height: 200,
    x: 0,
    y: 0,
    minimizable: false,
    useContentSize: true, // 新增：强制窗口尺寸匹配内容
    webPreferences: {
        backgroundThrottling: false,
        nodeIntegration: true,
        contextIsolation: false
    }
})

3. 备选：主进程监听鼠标事件实现拖拽

如果CSS方案仍有兼容性问题，可以通过主进程监听渲染进程的鼠标事件手动实现拖拽：

• 渲染进程（script.js）代码：

let isDragging = false;
let startX, startY;

// 仅空白区域触发拖拽，点击鸭子跳过
document.getElementById('wrapper').addEventListener('mousedown', (e) => {
    if (e.target.id === 'duck') return;
    isDragging = true;
    const winPos = window.electron.remote.getCurrentWindow().getPosition();
    startX = e.screenX - winPos[0];
    startY = e.screenY - winPos[1];
});

window.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    const win = window.electron.remote.getCurrentWindow();
    win.setPosition(e.screenX - startX, e.screenY - startY);
});

window.addEventListener('mouseup', () => {
    isDragging = false;
});

• 主进程（index.js）需启用remote模块：

webPreferences: {
    backgroundThrottling: false,
    nodeIntegration: true,
    contextIsolation: false,
    enableRemoteModule: true // 启用remote模块支持跨进程调用
}

验证效果 #

修改后，Windows下窗口布局不会偏移，点击鸭子图片可正常播放音频，空白区域仍可拖拽窗口。

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