设置 -webkit-app-region 后无法响应鼠标点击事件的解决方式

2022-02-17 14:38:21

　　在开发应用的过程中，想要使得窗口在普通大小可以拖动，经常会设置该css属性：-webkit-app-region: drag;

　　但是设置了这个属性后，发现双击全屏和 restore size 等功能又废了，包括鼠标样式等等，实际上加了该属性就触发不了鼠标的相关事件。

　　通过搜索不难发现，有如下方案：

　　1、拖动不要用 -webkit-app-region 了，自己监听 mouseDown 和 mouseUp 来实现吧

　　2、父元素设置 -webkit-app-region： drag, 子元素 -webkit-app-region： no-drag 即可

　　但是，想想在实际开发过程中有点特殊的情况，即：要实现拖拽和双击放大/缩小的所著元素为同一个 DOM

　　解决方案：

　　在宿主 Dom 中嵌套一个等宽，等高，但设置了-webkit-app-region： no-drag 属性的 div 即可，上代码：

<!-- 拖拽使用 -->
<div [ngClass]="{‘title-bar__drag‘: !isMax}">
    <div style="-webkit-app-region: no-drag; width: 100%;height: 100%"></div>
</div>

码农公寓