場景：uniapp框架優(yōu)化小程序項目中，發(fā)現(xiàn)了一個movable-area相關(guān)的事件穿透的問題，先整理下業(yè)務(wù)邏輯，在線客服通過小圖標(biāo)的展現(xiàn)形式懸浮在頁面上，小程序初始化時賦一個初始坐標(biāo)位置，用戶可以在頁面中隨意拖動在線客服圖標(biāo)位置，防止阻擋到頁面的正常展示或者事件的觸發(fā)，拖動以后全局記錄拖動坐標(biāo)，切換頁面保持當(dāng)前拖動后的坐標(biāo)位置
由于app和小程序的架構(gòu)是邏輯層與視圖層分離，使用js監(jiān)聽拖動時會引發(fā)邏輯層和視圖層的頻繁通訊，影響性能。所以為了方便高性能的實(shí)現(xiàn)拖動，使用了uniapp中的movable-area組件。需注意movable-view必須在movable-area組件中，并且必須是直接子節(jié)點(diǎn)，否則不能移動。這就導(dǎo)致了在開發(fā)組件的時候必須要考慮fixed定位后如何讓movable-area不顯示，還要讓movable-view中的在線客服在頁面層的上面顯示。
思路一：理論上的最佳層級關(guān)系是：在線客服圖標(biāo)層級 （movable-view）> 頁面層 > 在線客服的拖動范圍層（movable-area） ，在保證在線客服圖標(biāo)fixed定位的情況下不影響頁面層的邏輯事件，那么問題來了，fixed定位的元素（movable-area）z-index如果小于其他頁面層的z-index，那fixed定位的（movable-area）中的子元素（movable-view）z-index無論怎么設(shè)置都不能超過頁面層展示。這種情況其實(shí)也有解決方案，把movable-area寫在組件外，在每個引用在線客服的頁面最外層包一個movable-area（把頁面層和movable-view包在movable-area里面），但是這種情況就導(dǎo)致了很多頁面都需要寫一層movable-area包裹當(dāng)前頁面元素，所以不推薦這種方式
思路二：把movable-area放在頁面層上方（movable-area的z-index > 頁面層的z-index），這種布局方式可以解決圖標(biāo)的顯示問題，但是會影響到頁面層的點(diǎn)擊事件，于是就用到了css的pointer-events，以前一直沒用過，這種情景下真是讓人眼前一亮，沒聊結(jié)果pointer-events的可以參考下張鑫旭大佬的文章，介紹的比較清晰明了，CSS3 pointer-events:none應(yīng)用舉例及擴(kuò)展
完美解決這種情況，既不影響movable-area fixed定位下圖標(biāo)的展示和點(diǎn)擊 又不影響頁面層的點(diǎn)擊事件
