我正在与Electron合作，并试图制作一个自定义标题栏-到目前为止我已经取得了成功。但标题栏最重要的功能已经消失了——在屏幕上拖动应用程序。
我在网上读到关于-webkit-app-region: drag;属性的文章，它很有效！问题是…我现在无法点击标题栏中的任何按钮！有办法解决这个问题吗？
HTML:
<div style="position: absolute; top: 0; width: 100%; height: 29px; overflow: hidden; z-index: 50; background: rgba(255, 255, 255, 0.8);" class="titlebar">
<h1 style="float: left; opacity: 0.85; margin: 4px 0 0 44%; font-family: Jost-400-Book; font-size: 12pt;">Dashboard - Wealm</h1>
<button id="closeApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Multicolore; font-size: 18pt; margin-top: 2px;">x</button>
<button id="minApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Multicolore; font-size: 18pt; margin-top: 2px;">-</button>
</div>
JavaScript:
...
const remote = require('electron').remote;
document.getElementById("minApp").addEventListener("click", function (e) {
document.getElementById('minApp').style.opacity = '0.55';
var window = remote.getCurrentWindow();
window.minimize();
});
document.getElementById("closeApp").addEventListener("click", function (e) {
document.getElementById('closeApp').style.opacity = '0.55';
var window = remote.getCurrentWindow();
window.close();
});
document.getElementById('minApp').onmouseover = function() {
document.getElementById('minApp').style.opacity = '1';
}
document.getElementById('minApp').onmouseout = function() {
document.getElementById('minApp').style.opacity = '0.55';
}
document.getElementById('closeApp').onmouseover = function() {
document.getElementById('closeApp').style.opacity = '1';
}
document.getElementById('closeApp').onmouseout = function() {
document.getElementById('closeApp').style.opacity = '0.55';
}
...
非常感谢您的任何建议！祝你今天过得愉快！
又是我！我设法通过如下更改HTML来解决这个问题：
<div style="position: absolute; top: 0; width: 100%; height: 29px; overflow: hidden; z-index: 50; background: rgba(255, 255, 255, 0.8);" class="titlebar">
<div class="dragzone" style="-webkit-app-region: drag; overflow: hidden; position: absolute; left: 0; width: 990px; height: 29px;"></div>
<h1 style="float: left; opacity: 0.85; margin: 4px 0 0 44%; font-family: Jost-400-Book; font-size: 12pt;">Dashboard - Wealm</h1>
<button id="closeApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Eight One; font-size: 18pt; margin-top: 2px;">x</button>
<button id="minApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Eight One; font-size: 18pt; margin-top: 2px;">-</button>
</div>
现在有一个新元素，它覆盖了除按钮之外的整个标题栏的一部分，并使用属性-webkit-app-region: drag;设置，允许拖动窗口。
祝你今天过得愉快！
很高兴您解决了这个问题！我认为也设置风格：
-webkit-app-region: no-drag;
上的按钮也应该工作。