在 Electron 中可拖动区域更改光标

Question

我正在使用Electron制作一个应用程序，窗口是无框的。我有一些顶部区域需要使用-webkit-app-region: drag进行拖动，但是当我这样做时，光标不会改变。

显然，在此片段中它将无法被拖动，因为它不是电子应用程序，但基本上，在可拖动的元素上，光标不会改变。

编辑：似乎尝试在任何 Webkit 样式上更改光标都根本不起作用，因为我也试图在滚动条上更改光标。 是否有任何修复方法？ 我已经搜索过了，但没有找到合适的。

#draggable {
  -webkit-app-region: drag;
  cursor: grab;
  height: 40px;
  width: 90%;
  margin: 0;
  background-color: #393939;
  color: #000;
  position: absolute;
  z-index: 2;
  top: 0;
  border-bottom: 3px solid #202020;
}
#draggable:hover {
  cursor: grab;
}

<div id="draggable">
   <h3 style="margin: 5px 0 0 10px;">Hardware Application</h3>
</div>

- hannacreed

---

相关的Chromium问题：https://bugs.chromium.org/p/chromium/issues/detail?id=229330&q=app-region&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified - Red Mercury

Answer 1

不幸的是，设置-webkit-app-region: drag;会禁用所有点击和鼠标事件，因为它被视为标题栏，所以你无法改变光标。

我想包含我读到这个信息的地方，但我现在找不到了。

参见:

#1354 -webkit-app-region: drag吞噬所有点击事件

#8730 无边框的 Electron 应用程序不能使用 CSS 光标:pointer

- Joshua

---

那太糟糕了，希望他们有一天会更新它让它能够正常工作吧？ - hannacreed

可能吧，但我认为不会这样做，因为他们将该问题关闭了。 - Joshua

5年过去了，我想可以放心地说他们不会这样做了。 - SMJS

Answer 2

嗯，抱歉，但有一个有一些限制的替代方案可行：

在React-TS中，有一个标题栏的示例，一旦开始拖动，就会发送鼠标移动事件：

function Header({ leading, navigation, following }: HeaderProps) {
  const navigate = useNavigate();
  const [, startTransition] = useTransition();
  const [dragging, setDragging] = useState(false);
  return (
    <div
      className="titleBar"
      onMouseDown={() => {
        setDragging(true);
      }}
      onMouseUp={() => {
        setDragging(false);
      }}
      onMouseLeave={() => {
        setDragging(false);
      }}
      onMouseMove={(e) => {
        if (dragging) {
          window.electron.ipcRenderer.sendMessage(
            'window',
            'move',
            e.movementX,
            e.movementY
          );
        }
      }}
    >
      <div className="flexrow_start">
        {leading}
        <div>
          {navigation.map((info, index) => (
            <button
              type="button"
              onClick={(e) => {
                e.preventDefault();
                startTransition(() => {
                  navigate(info.destination ?? '/');
                });
              }}
              key={index}
            >
              {info.content}
            </button>
          ))}
        </div>
      </div>
      {following !== undefined && (
        <div className="flexrow_end"> {following}</div>
      )}
    </div>
  );
}

在 main.ts 文件中：

ipcMain.on('window', (e, arg, arg2, arg3) => {
  switch (arg as string) {
    // comes from element added to header as element following routes
    case 'min':
      mainWindow?.minimize();
      break;
    // comes from element added to header as element following routes
    case 'max':
      if (mainWindow?.isMaximized()) {
        mainWindow.unmaximize();
      } else {
        mainWindow?.maximize();
      }
      break;
    // comes from element added to header as element following routes
    case 'close':
      app.quit();
      break;
    //header element dragging handler
    case 'move':
      console.log(arg2, arg3);
      mainWindow?.setPosition(
        mainWindow.getPosition()[0] + arg2,
        mainWindow.getPosition()[1] + arg3
      );
      break;
    default:
      break;
  }
});

.titleBar{
  height: 50px;
  display: flex;
  justify-content: space-between;


}
.titleBar:hover{
  cursor: grab;

}

编辑：当您在不同显示器之间移动电子应用程序时，它的工作效果并不好。如果有人对此有解决方案，我将非常感激您的评论。

- Nicolai Veliki