一、-webkit-app-region 是什么

-webkit-app-region 是一个 专用于桌面应用（特别是基于 Chromium 内核的壳，比如 Electron、NW.js） 的 非标准 CSS 属性。

它用于定义窗口哪些区域可以被鼠标拖动（即“可拖拽区域”），哪些区域是交互区域（可点击、可输入等）。

二、属性取值

三、典型用法示例（Electron）

.header {
  -webkit-app-region: drag; /* 整个 header 可拖动窗口 */
  height: 40px;
  background: #333;
  color: white;
}

.header .buttons {
  -webkit-app-region: no-drag; /* 按钮区域要禁用拖动 */
}

.header .buttons button {
  cursor: pointer;
}

四、常见问题

1. cursor 失效

   • 任何带有 -webkit-app-region: drag 的区域，都无法再触发 cursor、hover 等交互效果；

   • 也不会响应点击事件、pointerenter 等；

   • 所以你会发现鼠标移上去不变手型，但点击事件可能在 JS 中还能监听到（这取决于渲染层）。

2. 解决方法

   • 给交互元素显式加上：

     -webkit-app-region: no-drag;
     cursor: pointer;
     

   • 或者不要在交互区域使用 drag。

五、总结

要点一句话总结：

-webkit-app-region: drag 会让区域变成“窗口拖拽层”，不再响应任何鼠标交互；想恢复交互，就加 -webkit-app-region: no-drag。