electron 拖动webkit-app-region时悬停不起作用

fcwjkofz  于 2023-05-11  发布在  Electron
关注(0)|答案(1)|浏览(321)
.title_bar {
  -webkit-app-region: drag;
  background-color: #050505; 
}

.title_bar:hover {
  background-color: aqua;
  pointer-events: auto;
}

当-webkit-app-region:拖动,这是预期的,但我如何才能让它工作?
属性“-webkit-app-region:“drag;”用于允许在应用程序窗口上拖动指定区域。默认情况下,此属性禁用鼠标与区域的交互,包括“mouseenter”和“mouseleave”事件。

0vvn1miw

0vvn1miw1#

您需要为mouseenter和mouseleave添加事件侦听器,以手动应用和删除悬停样式。然后在你的JS中为mouseenter和mouseleave添加事件监听器。当鼠标指针进入.title_bar元素时,拖动功能将暂时禁用,并应用悬停效果

.title_bar {
  -webkit-app-region: drag;
  background-color: #050505;
}

.title_bar-hover {
  background-color: aqua;
  pointer-events: auto;
}

window.addEventListener('DOMContentLoaded', () => {
  const titleBar = document.querySelector('.title_bar');

  titleBar.addEventListener('mouseenter', () => {
    
    titleBar.style.webkitAppRegion = 'no-drag';
    titleBar.classList.add('title_bar-hover');
  });

  titleBar.addEventListener('mouseleave', () => {
    
    titleBar.style.webkitAppRegion = 'drag';
    titleBar.classList.remove('title_bar-hover');
  });
});

相关问题