設置 -webkit-app-region 后無法響應鼠標點擊事件的解決方式


  在開發應用的過程中,想要使得窗口在普通大小可以拖動,經常會設置該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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM