Electron应用：事件监听器函数传参失败且未正确绑定

我来帮你搞定这个问题！你遇到的核心问题是事件监听器的绑定方式错误——你直接调用了setProgress()函数，而不是把它作为回调函数传递给addEventListener，所以页面加载时它就执行了一次，之后再也不会响应输入框的事件。下面一步步帮你修复：

1. 修复渲染进程的事件绑定逻辑 #

你的原代码中，addEventListener的第二个参数直接执行了setProgress(...)，这会导致函数在页面加载时立即运行，而不是等待事件触发。正确的做法是传递一个匿名回调函数，在事件触发时再获取输入框的值并调用setProgress。

修改后的渲染进程代码：

const { ipcRenderer } = require("electron");
// 缓存输入框元素，避免重复查找DOM
const progressInput = document.getElementById("progress");

function setProgress(pgrss) {
  console.log("fromage"); // 调试用
  // 额外添加数值校验：Electron进度条只接受0-1之间的数值，超出会自动截断，这里提前处理更稳妥
  const validProgress = Math.max(0, Math.min(1, pgrss));
  ipcRenderer.send("sendMainMessage", { progress: validProgress });
};

// 绑定click事件
progressInput.addEventListener("click", () => {
  const inputValue = parseFloat(progressInput.value);
  setProgress(inputValue);
});

// 绑定blur事件（输入框失去焦点时触发，符合你的需求）
progressInput.addEventListener("blur", () => {
  const inputValue = parseFloat(progressInput.value);
  setProgress(inputValue);
});

2. 验证主进程代码（无问题，但补充初始化细节） #

你的主进程IPC接收逻辑是正确的，只要确保mainWindow是已正确初始化的BrowserWindow实例即可。这里补充完整的主进程初始化示例，避免因窗口未就绪导致的问题：

const { app, BrowserWindow, ipcMain } = require('electron');
let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false // 如果你没有使用preload脚本，需要关闭这个选项
    }
  });

  mainWindow.loadFile('index.html');

  // 监听渲染进程的消息
  ipcMain.on("sendMainMessage", (event, properties) => {
    mainWindow.setProgressBar(properties.progress);
  });
}

app.whenReady().then(createWindow);

// 处理Electron的窗口生命周期
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

3. 效果验证 #

修改完成后，你可以：

• 点击输入框，触发click事件发送进度值
• 在输入框中修改数值后点击页面其他区域，触发blur事件发送进度值
  此时开发者工具的控制台会输出fromage，主进程也会收到消息并设置应用的进度条。

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