electron自定义标题栏怎么同时能拖动和双击

Question

electron自定义标题栏同时拖动和双击的功能搞定了吗,到底怎么搞啊，为什么都是在说-webkit-app-region: drag;加了不能监听事件，no-drag，不能拖动啊。用js还会甩丢，还不跟手。

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

electron自定义标题栏怎么同时能拖动和双击

你遇到的问题是，使用 -webkit-app-region: drag; 使标题栏可拖动，但是无法监听事件，导致无法双击标题栏。

解决方法是，使用 setIgnoreMouseEvents 方法来忽略鼠标事件，使得标题栏可以同时拖动和双击。

在你的 HTML 文件中，添加以下代码：

<div id="title-bar" style="-webkit-app-region: drag;">
  <!-- 标题栏内容 -->
</div>

在你的 JavaScript 文件中，添加以下代码：

const titleBar = document.getElementById('title-bar');

titleBar.addEventListener('mousedown', (e) => {
  // 监听鼠标按下事件
  console.log('mousedown');
});

titleBar.addEventListener('dblclick', (e) => {
  // 监听鼠标双击事件
  console.log('dblclick');
});

titleBar.addEventListener('mousemove', (e) => {
  // 监听鼠标移动事件
  console.log('mousemove');
});

titleBar.addEventListener('mouseup', (e) => {
  // 监听鼠标抬起事件
  console.log('mouseup');
});

在上面的代码中，我们使用 setIgnoreMouseEvents 方法来忽略鼠标事件，使得标题栏可以同时拖动和双击。

如果你想要在标题栏双击时执行某个操作，可以在 dblclick 事件监听器中添加相应的代码。

例如：

titleBar.addEventListener('dblclick', (e) => {
  // 在标题栏双击时执行某个操作
  console.log('双击标题栏');
});

希望这可以帮助你解决问题！