Electron自定义鼠标向下按压移动，窗口可以跟着移动，同时不影响其他点击事件的功能

在 Electron + TypeScript + Vue + SCSS 项目中，要实现 ​鼠标按压 + 移动拖拽窗口​ 的功能，同时不影响其他点击事件（如按钮点击），可以按照以下步骤实现：

​1. 修改 Login.vue（或你的登录页面组件）​​

    
    登录
  

import { defineComponent, ref } from 'vue';
import { ipcRenderer } from 'electron'; // 用于与主进程通信

export default defineComponent({
  name: 'Login',
  setup() {
    const isDragging = ref(false);
    const startPos = ref({ x: 0, y: 0 });

    // 鼠标按下时记录初始位置
    const handleMouseDown = (e: MouseEvent) => {
      // 检查是否点击的是可拖动区域（例如排除按钮）
      if ((e.target as HTMLElement).tagName !== 'BUTTON') {
        isDragging.value = true;
        startPos.value = { x: e.screenX, y: e.screenY };
      }
    };

    // 鼠标移动时拖拽窗口
    const handleMouseMove = (e: MouseEvent) => {
      if (isDragging.value) {
        const { x, y } = startPos.value;
        const deltaX = e.screenX - x;
        const deltaY = e.screenY - y;
        
        // 通知主进程移动窗口
        ipcRenderer.send('move-window', { deltaX, deltaY });
        
        // 更新起始位置（连续移动）
        startPos.value = { x: e.screenX, y: e.screenY };
      }
    };

    // 鼠标释放时停止拖拽
    const handleMouseUp = () => {
      isDragging.value = false;
    };

    // 登录按钮点击事件（确保不被拖拽干扰）
    const handleLogin = () => {
      console.log('登录逻辑');
    };

    return {
      isDragging,
      startPos,
      handleMouseDown,
      handleMouseMove,
      handleMouseUp,
      handleLogin,
    };
  },
});

.login-container {
  width: 100%;
  height: 100%;
  -webkit-app-region: no-drag; /* 允许子元素（如按钮）接收点击事件 */
}

/* 如果需要指定拖拽区域，可以单独设置 */
.drag-region {
  -webkit-app-region: drag; /* 整个区域可拖拽 */
}

​2. 修改主进程代码（如 main.ts 或 background.js）​​

在 Electron 主进程中添加窗口移动逻辑：

import { app, BrowserWindow, ipcMain } from 'electron';

let mainWindow: BrowserWindow | null = null;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    // 你的窗口配置...
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false, // 如果使用 Electron 12+，需结合 preload 脚本
    },
  });

  // 监听渲染进程的窗口移动请求
  ipcMain.on('move-window', (event, { deltaX, deltaY }) => {
    const [x, y] = mainWindow!.getPosition();
    mainWindow!.setPosition(x + deltaX, y + deltaY);
    mainWindow.setContentSize(740, 800); // 设置内容区域大小（不含边框）-----------重要
  });
});

​3. 关键细节说明​

1. ​拖拽与点击的隔离​

   • 通过 -webkit-app-region: no-drag 确保子元素（如按钮）可以正常响应点击。
   • 在 handleMouseDown 中检查 e.target，避免拖拽时误触按钮。

2. ​性能优化​

   • 使用 deltaX/deltaY 计算偏移量，避免频繁调用 getPosition()。

3. ​安全提示​

   • 如果启用 contextIsolation: true，需通过 preload.js 暴露 ipcRenderer 方法。

​4. 最终效果​

• 鼠标在空白区域按下并移动时，窗口会跟随拖动。
• 点击按钮等交互元素时，不会触发拖拽。

如果有其他需求（如限制拖拽区域或优化动画），可以进一步调整代码！

文章来源于互联网:Electron自定义鼠标向下按压移动，窗口可以跟着移动，同时不影响其他点击事件的功能

相关推荐: 智能ai写作怎么用？写作小白也能用ai快速写小说

职场打工牛马们集合！大家除了上班还有拓展其他的兼职吗？ 其实小编还偶尔写一些短篇小说，毕竟看书看多了，脑袋里想出了一些别人还没写的梗，就自己动笔把这些脑洞写出来，相当于给自己做饭吃了！ 当然，咱也不是纯手写，还是有借助一些ai写作生成器在线来润色一些文段的！ …