电子标题栏“无拖动"和“拖动"不工作

2022-01-10 00:00:00 titlebar electron javascript css css-float

我有一个 #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.

相关文章