我试图为我的电子应用程序做一个简单的关闭按钮。但是由于某种原因document.querySelector（'*'）不适用于我的应用程序的顶栏。而且即使我设法特别选择了负责关闭按钮的div，click事件listen也不会触发。
下面是我主要.js：
const path = require('path')
require('electron-reload')(__dirname);
const createWindow = () =>{
const win = new BrowserWindow({
width: 400, // width = 400
height: 600, // height = 600
frame: false,
opacity: 0.98,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
//win.webContents.openDevTools();
win.setResizable(false);
win.loadFile('index.html')
// add button check
ipcMain.on('exit-app', () => {
console.log('clicked on something')
})
}
app.whenReady().then(() => {
createWindow()
})
app.on('window-all-closed', () => {
if(process.platform !== 'darwin') app.quit()
})下面是我index.html：
<link rel="stylesheet" href="./styles.css">
<html>
<div class="titlebar">
<div class="buttons">
<p id="text">Omer's Electron Application</p>
<div id="close"> </div>
<div id="minimize"> </div>
</div>
</div>
<head>
<title>
Omer's Electron Application
</title>
</head>
<script src="./index.js"></script>
</html>这是我预加载.js：
const {ipcRenderer} = require('electron')
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('*').addEventListener('click', ()=>{
ipcRenderer.send('exit-app')
})
})这是我的风格.css：
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif');
* {
background-color: #525252;
margin: 0;
padding: 0;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
font-size: 18px;
font-family: 'Roboto Serif', serif;
}
.titlebar *{
background-color: #414141;
height: 40px;
-webkit-app-region: drag;
position: fixed;
}
#text{
position: fixed;
left: 50px;
top: 10px;
height: 10px;
color: #e0e0e0;
}
.buttons > div {
width: 25px;
height: 25px;
border-radius: 50%;
text-align: center;
position: fixed;
left: 370px;
top: 7px;
}
.buttons > #close{
background-color: #eb5a55;
}
.buttons > #minimize{
background-color: #f4bb40;
position: fixed;
left: 340px;
}
1条答案
按热度按时间kwvwclae1#
我偶然发现了这个帖子，找到了我要找的答案！Change Cursor on Draggable region in Electron
很遗憾设置了-webkit-app-region：拖动;禁用所有点击和鼠标事件，因为它被视为标题栏，所以你不能改变光标。我想包括我读到的地方，但我找不到它了。请参阅：#1354 -网络工具包-应用程序-区域：拖动吃掉所有点击事件#8730无框架电子应用程序不工作css光标：指针
因此，显然在删除-webkit-app-region之后：拖动的问题被修复，所有的鼠标事件像魔术一样工作！