电子标题栏 "no-drag" 和 "drag" 不工作

Question

我有一个 #topleft 红色标题栏，其中包含多个“制表符”按钮，这些按钮应填满所有可用的 space except a #topright蓝色方块。
由于 -webkit-app-region: drag;，可以在 #topleft 的红色背景上将主电子 window 移动 click-and-dragging。这行得通。

问题:

点击 #topright 被忽略：alert() 未触发（此块的 child 个元素存在相同问题）
#topright span:hover { background-color: black; } 被忽略
#topright { -webkit-app-region: no-drag; } 被忽略：我们仍然可以在 #topright 上将 window 移动 click-and-dragging 而它不应该

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

注：

我已经看到了我已经看到了但是这里没有帮助。
已链接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>

电子标题栏 "no-drag" 和 "drag" 不工作

Electron title bar "no-drag" and "drag" not working

javascript

css

titlebar

css-float

electron