Electron 25.2.0中mouseover事件未正常触发的疑难问题排查

这是Electron 25.x版本在Windows 10下的典型事件同步问题，本质是滚动操作时，Electron主进程没有及时把Windows系统的鼠标位置消息转发给Chromium渲染进程。渲染进程无法感知鼠标已经悬停在元素上，自然不会触发mouseover/mouseout；而点击操作会强制触发窗口的焦点同步逻辑，让渲染进程重新获取到正确的鼠标坐标，事件也就恢复正常了。

以下是几个无需升级Electron版本的可行方案：

方案1：渲染进程手动监听滚动，模拟鼠标悬停事件 #

在页面的渲染进程中，通过scroll事件主动检测鼠标位置，手动触发对应的悬停事件。需要先记录鼠标的实时位置，滚动时用该位置判断当前元素：

// 渲染进程代码
let currentMousePos = { x: 0, y: 0 };
let lastHoveredEl = null;

// 先记录鼠标实时位置
document.addEventListener('mousemove', (e) => {
  currentMousePos = { x: e.clientX, y: e.clientY };
});

// 滚动时检测并触发事件
window.addEventListener('scroll', () => {
  const targetEl = document.elementFromPoint(currentMousePos.x, currentMousePos.y);
  if (targetEl === lastHoveredEl) return;

  // 触发mouseout给之前的元素
  if (lastHoveredEl) {
    lastHoveredEl.dispatchEvent(new MouseEvent('mouseout', { 
      bubbles: true, 
      cancelable: true 
    }));
  }
  // 触发mouseover给当前元素
  if (targetEl) {
    targetEl.dispatchEvent(new MouseEvent('mouseover', { 
      bubbles: true, 
      cancelable: true 
    }));
  }

  lastHoveredEl = targetEl;
});

这个方案直接在渲染层补全事件逻辑，不会影响主进程，兼容性较好。

方案2：主进程强制同步窗口焦点 #

如果问题是窗口焦点丢失导致的事件不同步，可以通过主进程强制触发窗口的焦点切换，同步鼠标状态：

// 主进程代码
const { BrowserWindow, ipcMain } = require('electron');
const path = require('path');

const mainWindow = new BrowserWindow({
  // 你的窗口配置
  webPreferences: {
    contextIsolation: true,
    preload: path.join(__dirname, 'preload.js') // 需要预加载脚本暴露IPC
  }
});

// 监听渲染进程的滚动通知
ipcMain.on('scroll-triggered', () => {
  if (mainWindow.isFocused()) {
    // 先失焦再聚焦，强制同步状态
    mainWindow.blur();
    setTimeout(() => mainWindow.focus(), 10);
  }
});

// preload.js中暴露IPC发送方法
const { ipcRenderer, contextBridge } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
  notifyScroll: () => ipcRenderer.send('scroll-triggered')
});

// 渲染进程中调用
window.addEventListener('scroll', () => {
  window.electronAPI.notifyScroll();
});

注意：这个方案可能会有轻微的窗口焦点闪烁，建议添加节流，避免频繁触发。

方案3：调整Electron窗口的WebPreferences配置 #

尝试在创建BrowserWindow时，禁用Chromium的部分优化特性，强制鼠标事件正常转发：

new BrowserWindow({
  webPreferences: {
    disableBlinkFeatures: 'MouseEventsWithoutBlink', // 禁用鼠标事件的无Blink优化
    backgroundThrottling: false, // 禁用后台节流，确保事件不被延迟
    enableWebSQL: false // 可选，减少不必要的进程开销
  }
});

这个方案是从Electron的底层配置入手，部分场景下可以直接解决问题，无需额外代码。

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