querySelector找不到文档的一部分
querySelector找不到文档的一部分
提问于 2022-08-16 03:37:44
我正在为我的电子应用程序做一个简单的关闭按钮。但出于某种原因，document.querySelector('*')不适用于我的应用程序的顶部栏。即使我能够具体地选择负责关闭按钮的div，单击事件侦听也不会触发。
这是我的main.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>这是我的preload.js：
const {ipcRenderer} = require('electron')
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('*').addEventListener('click', ()=>{
ipcRenderer.send('exit-app')
})
})这是我的styles.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
Stack Overflow用户
发布于 2022-08-16 04:35:20
我随机地碰到这条线，找到了我正在寻找的答案！Change Cursor on Draggable region in Electron
不幸的是，设置-webkit-app-region:拖动；禁用所有单击和鼠标事件，因为它被视为标题栏，因此您不能更改光标。我会包括我读到的地方，但我再也找不到了。参见：#1354 -webkit- App -region:拖动吃掉所有单击事件#8730无框电子应用程序不工作css光标:指针
所以很明显，在移除-webkit-app-区域之后:拖动问题是固定的，所有鼠标事件都像魔术一样工作！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73373380
复制相关文章
![document.querySelector()方法[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/5a8681c742d765e81b88611bcc507e85.png)
相似问题
文档querySelector实现的问题
Dart -“`querySelector`”找不到元素
querySelector找不到脚本元素
Queryselector返回null，找不到原因
QuerySelector在HTML上找不到模板
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
