我有一个#topleft红色标题栏包含多个“选项卡”按钮，应填充所有可用空间except a #topright蓝色块。
可以通过单击并拖动来移动 Electron 主窗口#topleft的红色背景，感谢-webkit-app-region: drag;。这有效。
Problems:
- 点击
#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>
Note:
-
我已经看过了 我已经看过了带有电子控件的无框窗户（Windows） https://stackoverflow.com/questions/35876939/frameless-window-with-controls-in-electron-windows但这在这里没有帮助。
-
Linked issue https://github.com/electron/electron/issues/27149
我对 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>
Note:我添加了一些负边距，以便蓝色元素会紧靠红色元素的边缘（而不是由于填充而位于红色元素内部）。
使用绝对定位和“克隆”元素的原始答案。 https://stackoverflow.com/revisions/65499285/1由于新信息更新了答案。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
