问题描述
我有一个 #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) 但这在这里没有帮助。
解决方法
我不熟悉 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>