为无框窗口添加了自定义标题栏，以使窗口可拖动。标题栏显示，但事件监听器不会触发：
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")
})
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 */
.
.
.
}