javascript - Electron :-webkit-app-region:拖动有效，但不允许我单击自定义标题栏中的按钮

Question

我正在与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';
        }
        ...

任何建议都将受到高度赞赏!祝你有美好的一天!

Answer 1

又是我!我设法通过更改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;属性，该属性允许拖动窗口。

祝你有美好的一天!