javascript - Electron 标题栏 “no-drag”和 “drag”无法正常工作

Question

我有一个#topleft红色标题栏，其中包含多个“选项卡”按钮，这些按钮应填充除#topright蓝色块之外的所有可用空间。
在#topleft的红色背景上单击并拖动，可以移动 Electron 主窗口。这可行。

问题:

对-webkit-app-region: drag;的点击将被忽略:#topright未触发(此块的子元素存在相同问题)

alert()被忽略

#topright span:hover { background-color: black; }被忽略:我们仍然可以通过单击并拖动#topright { -webkit-app-region: no-drag; }来移动窗口，但不应将其拖到

但是，如果我们在浏览器中运行相同的HTML代码，则所有代码都可以正常工作。
如何在Electron中解决此问题？

for (var i = 0; i < 50; i++)
document.getElementById("topleft").innerHTML += "<button>xyz" + i + "</button>";

* { margin: 0; }
#topright { float: right; width: 100px; background-color: blue; -webkit-app-region: no-drag; }
#topright:hover { background-color: black; }
#topleft { background-color: red; -webkit-app-region: drag; padding: 10px; }

<div id="topright" onclick="alert();">Click here!</div>
<div id="topleft"></div>

笔记:

我已经看过了，我已经看过Frameless window with controls in electron (Windows)了，但这对这里没有帮助。

链接的issue

Answer 1

我对Electron不熟悉，但是您可以尝试将 float 的蓝色元素移到红色元素中。

const max = 50;
let   i   = 0;

for ( ; i < max; i++ ) {
  document.getElementById( 'topleft' ).innerHTML += `<button>xyz${ i }</button>`;
}

* {
  margin: 0;
}

#topleft {
  background-color: red;
  -webkit-app-region: drag;
  padding: 10px;
}

#topright {
  float: right;
  margin: -10px -10px 0 0;
  width: 100px;
  background-color: blue;
  -webkit-app-region: no-drag;
}

#topright:hover {
  background-color: black;
}

<div id="topleft">
  <div id="topright" onclick="alert();">Click here!</div>
</div>

注意:我添加了一些负边距，以使蓝色元素可以抵靠红色元素的边缘(由于填充，VS处于红色元素内部)。
Original Answer using absolute positioning and a "cloned" element.由于新信息，更新了答案。