无边框窗口可拖拽自定义标题栏无法触发eventListener怎么办？

给Electron无边框窗口添加自定义标题栏后，标题栏可正常显示并实现拖拽，但绑定的DOM鼠标事件（如mouseover）无法触发。相关代码如下：

main.js #

const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600,
      frame: false,
      scrollbar: false,
      webPreferences:{
        nodeIntegration: true,
        contextIsolation: false,
      }
    })
    win.loadFile('index.html')
  }

index.html #

<body>
  <div class="window">
    <div class="window-content">
      <textarea>some content</textarea>
    </div>
  </div>
  <script src="index.js"></script>
</body>

index.js #

let titleBar = document.createElement('div')
titleBar.style.width = "100%"
titleBar.style.height = "32px"
titleBar.style.backgroundColor = "#fff"
titleBar.style.position = "absolute"
titleBar.style.top = titleBar.style.left = 0
titleBar.style.webkitAppRegion = "drag"
titleBar.textContent = 'My App';

document.body.appendChild(titleBar)

// 无任何响应
titleBar.addEventListener("mouseover", () => {
    console.log("hello")
})

原因分析 #

当元素设置webkitAppRegion: "drag"后，该元素会被标记为Electron窗口的拖拽区域，系统级的窗口拖拽逻辑会优先拦截鼠标事件，导致DOM层面的鼠标事件无法传递到你的事件监听器中。

解决方案 #

在标题栏内嵌套一个设置了webkitAppRegion: "no-drag"的子元素，将事件监听器绑定到这个子元素上。这样既保留了标题栏的拖拽功能，又能正常触发鼠标事件：

let titleBar = document.createElement('div')
titleBar.style.width = "100%"
titleBar.style.height = "32px"
titleBar.style.backgroundColor = "#fff"
titleBar.style.position = "absolute"
titleBar.style.top = titleBar.style.left = 0
titleBar.style.webkitAppRegion = "drag"

// 创建不可拖拽的子元素，用于承载内容和事件监听
const titleContent = document.createElement('div')
titleContent.textContent = 'My App'
titleContent.style.webkitAppRegion = "no-drag"
titleContent.style.width = "100%"
titleContent.style.height = "100%"
titleContent.style.display = "flex"
titleContent.style.alignItems = "center"
titleContent.style.paddingLeft = "10px"

// 在子元素上绑定事件
titleContent.addEventListener("mouseover", () => {
    console.log("hello")
})

titleBar.appendChild(titleContent)
document.body.appendChild(titleBar)

这种方法通过子元素规避了拖拽区域的事件拦截，同时子元素占满父元素，确保整个标题栏区域都能响应鼠标事件。

内容的提问来源于stack exchange，提问作者nBar