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

Question

我有一个 #topleft 红色标题栏，其中包含多个“选项卡”按钮，这些按钮应该填满所有可用空间除了一个 #topright 蓝色块。
感谢-webkit-app-region: drag;，可以通过在#topleft 的红色背景上单击并拖动来移动主电子窗口。这行得通。

问题：

1. 对#topright 的点击被忽略：alert() 未被触发（此块的子元素同样存在问题）
2. #topright span:hover { background-color: black; } 被忽略
3. #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

Answer 1

我不熟悉 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.由于新信息而更新了答案。

Answer 2

其实有一个很简单的解决办法：只要把浮动的div移到里面#topleft：

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