是否可以在无框窗口中用于拖动窗口的自定义标题栏添加事件监听器？

Question

为无框窗口添加了自定义标题栏，以使窗口可拖动。标题栏显示，但 eventListener 不会触发：

main.js：

const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600,
      frame: false,
      scrollbar: false,
      webPreferences:{
        nodeIntegration: true,
        contextIsolation: false,
      }
    })
    win.loadFile('index.html')
  }

index.html：

<body>
  <div class="window">
    <div class="window-content">
      <textarea>some content</textarea>
    </div>
  </div>
  <script src="index.js"></script>
</body>

index.js：

let titleBar = document.createElement('div')
titleBar.style.width = "100%"
titleBar.style.height = "32px"
titleBar.style.backgroundColor = "#fff"
titleBar.style.position = "absolute"
titleBar.style.top = titleBar.style.left = 0
titleBar.style.webkitAppRegion = "drag"
titleBar.textContent = 'My App';

document.body.appendChild(titleBar)

// Nothing happens
titleBar.addEventListener("mouseover", () => {
    console.log("hello")
})

Answer 1

是的，可以将事件监听器添加到无框架窗口中的自定义标题栏。您观察到的问题是由

引起的

titleBar.style.webkitAppRegion = "drag"

这会干扰事件传播机制并阻止监听器检测到鼠标事件。

换句话说，在 Electron 中，对于同一个 DOM 对象，你不能同时拥有这两种功能：使用

.style.webkitAppRegion = "drag"

进行拖动并使用

.addEventListener("mouseover",

接收鼠标事件。如果您想要拖动行为，您需要使用从 DOM 对象接收到的鼠标事件自行实现。

要亲自查看它，请注释或删除“拖动”线，然后体验鼠标事件按预期工作（不要忘记控制台输出是在应用程序窗口中的 Ctrl+Shift+i 之后提供的，而不是在运行应用程序的终端窗口）。

请注意，使用一些“编程技巧”通常可以在任何软件系统中实现任何所需的效果，因此从这个角度来看，某些事情不可能的陈述通常并不真正正确，只是说没有直接简单且众所周知的方法实现某事。

一种可能的解决方法是有两个标题栏（或同一行标题栏旁边的拖动图标）：一个用于拖动窗口，另一个用于响应鼠标事件：

console.log("renderer.js loaded");

document.addEventListener('DOMContentLoaded', () => {
    // Create the draggable title bar at the very top
    let draggableTitleBar = document.createElement('div');
    draggableTitleBar.style.width = "100%";
    draggableTitleBar.style.height = "24px";
    draggableTitleBar.style.backgroundColor = "#e74c3c";
    draggableTitleBar.style.position = "absolute";
    draggableTitleBar.style.top = "0px";
    draggableTitleBar.style.left = "0px";
    draggableTitleBar.style.zIndex = "1000";
    draggableTitleBar.style.webkitAppRegion = "drag";
    draggableTitleBar.textContent = 'Draggable Title Bar';

    // Create the non-draggable title bar below it
    let nonDraggableTitleBar = document.createElement('div');
    nonDraggableTitleBar.style.width = "100%";
    nonDraggableTitleBar.style.height = "40px";
    nonDraggableTitleBar.style.backgroundColor = "#3498db";
    nonDraggableTitleBar.style.position = "absolute";
    nonDraggableTitleBar.style.top = "24px"; // Adjust position as needed
    nonDraggableTitleBar.style.left = "0px";
    nonDraggableTitleBar.style.zIndex = "1000";
    nonDraggableTitleBar.textContent = 'Non-Draggable Title Bar';

    // Add event listeners to the non-draggable title bar
    nonDraggableTitleBar.addEventListener("mouseover", () => {
        console.log("Mouseover event triggered on non-draggable title bar");
    });

    nonDraggableTitleBar.addEventListener("click", () => {
        console.log("Non-draggable title bar clicked");
    });

    // Append both title bars to the document body
    document.body.appendChild(draggableTitleBar);
    document.body.appendChild(nonDraggableTitleBar);

    console.log("Title bars added to the DOM");
});

它看起来像这样：

Answer 2

你不需要使用eventListener，只需使用CSS即可实现此目的。

main.js

const createWindow = () => {
const win = new BrowserWindow({
  width: 800,
  height: 600,
  frame: false,
  scrollbar: false,
  titleBarStyle: 'hidden',//Add this
  titleBarOverlay: {
   color: '#ecf2f9',
   symbolColor: '#003d99',
   height: 40,
  },//Add this for windows
  webPreferences:{
    nodeIntegration: true,
    contextIsolation: false,
  }
})
win.loadFile('index.html')
}

index.html

 <body>
<div class="titleBar">
My App
</div>
<div class="window">
  <div class="window-content">
    <textarea>some content</textarea>
  </div>
</div>
<script src="index.js"></script>

index.css

.titleBar{
background-color: #ecf2f9;
height: 40px; /* Adjust height as needed */
-webkit-app-region: drag; /*Allow dragging the window */
.
.
.
}

是否可以在无框窗口中用于拖动窗口的自定义标题栏添加事件监听器？

问题描述投票：0回答：2

2个回答

最新问题

是否可以在无框窗口中用于拖动窗口的自定义标题栏添加事件监听器？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2