为无框窗口添加了自定义标题栏，以使窗口可拖动。标题栏显示，但 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")
})
你不需要使用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 */
.
.
.
}
是的，可以将事件监听器添加到无框架窗口中的自定义标题栏。 您观察到的问题是由
引起的titleBar.style.webkitAppRegion = "drag"
这会干扰事件传播机制并阻止监听器检测到鼠标事件。
换句话说，在 Electron 中你似乎不能同时拥有两者：拖动和触发鼠标事件。
要亲自查看它，请注释或删除“拖动”线，然后体验鼠标事件按预期工作（不要忘记控制台输出是在应用程序窗口中的 Ctrl+Shift+i 之后提供的，而不是在运行应用程序的终端窗口）。