电子标题栏“无拖动”和“拖动”不起作用

如何解决电子标题栏“无拖动”和“拖动”不起作用

我有一个 #topleft 红色标题栏，其中包含多个“标签”按钮，这些按钮应该填充所有可用空间除了一个 #topright 蓝色块。
借助 #topleft，可以通过在 -webkit-app-region: drag; 的红色背景上单击并拖动来移动主 Electron 窗口。这有效。

问题：

忽略 #topright 上的点击：alert() 未触发（此块的子元素存在相同问题）
#topright span:hover { background-color: black; } 被忽略
#topright { -webkit-app-region: no-drag; } 被忽略：我们仍然可以通过在 #topright 上点击并拖动来移动窗口，而它不应该

但是，如果我们在浏览器中运行相同的 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

解决方法

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

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>

注意：我添加了一些负边距，以便蓝色元素与红色元素的边缘对接（而不是由于填充而位于红色元素内）。

Original Answer using absolute positioning and a "cloned" element. 根据新信息更新答案。

实际上有一个非常简单的解决方案：只需将浮动的 div inside #topleft 移动：

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