問題描述

我有一個 #topleft 紅色標題欄，其中包含多個標簽".應該填滿所有可用空間的按鈕除了一個#topright藍色塊.
借助 -webkit-app-region: drag;，可以通過在 #topleft 的紅色背景上單擊并拖動來移動主 Electron 窗口.這行得通.

I have a #topleft red title bar containing multiple "tab" buttons that should fill all the available space except a #topright blue block.
It is possible to move the main Electron window by click-and-dragging on #topleft's red background, thanks to -webkit-app-region: drag;. This works.

問題:

1. #topright 上的點擊被忽略:alert() 未被觸發(此塊的子元素同樣存在問題)
2. #topright span:hover { background-color: black;} 被忽略
3. #topright { -webkit-app-region: no-drag;} 被忽略:我們仍然可以通過點擊并拖動 #topright 來移動窗口，而它不應該

1. clicks on #topright are ignored: alert() is not triggered (same problem for child elements of this block)
2. #topright span:hover { background-color: black; } is ignored
3. #topright { -webkit-app-region: no-drag; } is ignored: we can still move the window by click-and-dragging on #topright whereas it should not

但是，如果我們在瀏覽器中運行相同的 HTML 代碼，則一切正常.

However if we run the same HTML code in a browser, all is working correctly.

如何在 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>

注意:

• 我已經看到了我已經看到了無框窗口在電子(Windows)中使用控件，但在這里沒有幫助.

鏈接的問題

推薦答案

我對 Electron 不熟悉，但你可以嘗試在紅色元素中移動浮動的藍色元素.

I'm not familiar with Electron but you could try moving the floated blue element within the red element.

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: I added some negative margins so that the blue element would butt up against the edges of the red element (vs being inside the red element because of padding).

使用絕對定位和克隆"的原始答案元素.由于新信息而更新了答案.

Original Answer using absolute positioning and a "cloned" element. Updated answer due to new information.

這篇關于電子標題欄“無拖動"和“拖動"不工作的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！