小程式：防止點擊遮罩層後遮罩層下方也反應的解決方法

這篇文章帶給大家的內容是關於小程式：防止點擊遮罩層後遮罩層下面也反應的解決方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

最近在做自訂彈窗，不免會使用到遮罩層或說蒙層。

但關鍵是，有遮罩層後，再點選遮罩層下的元件，還是會產生點擊事件。

那要如何解決這個問題呢 ？

網路上給了幾種方法
1 . 在遮罩層 view 中新增 catchtouchmove 點擊事件。因為 catch 事件綁定可以阻止冒泡事件向上冒泡。

<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showMask}}"/>

2 . 給底層頁面動態加入position:fixed;

<view style="{{hasMask?&#39;position:fixed;&#39;:&#39;&#39;}}>
    小程序弹出层点击穿透问题
    <button bindtap=&#39;showMask&#39;>弹出遮罩层</button>
</view>

透過實踐，網路上說的前面兩種是不可行的，對於第一種，不知是不是我姿勢不對！第二種純屬坑蒙拐騙！或者說他的專案能行是機緣巧合。

下面介紹的這種方法倒是非常不錯。

3 . 使用 wx:if 和 wx:else 或 hidden 控制顯示。 當彈出遮罩層時，不顯示組件。
至於使用 wx:if 或 hidden，一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情境下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。可以參考官方文件的說明。

<!-- 遮罩层  --><view class="mask" wx:if="{{hasMask}}"/><view wx:else=&#39;{{!hasMask}}&#39; style=&#39;text-align:center;margin-top:50px;&#39;>
    <!-- 这里是不希望被点击的组件 …… -->
  <button bindtap="showMask" type=&#39;primary&#39; style=&#39;width:50%;&#39; >点我弹窗</button></view>

這裡簡單的說一下遮罩層的樣式

/* 遮罩层 */.mask{  width: 100%;  height: 100%;  background: #000;  opacity: 0.5;  z-index: 9000;}

問題的解決方案千百種，多換角度會有意想不到的收穫。

專案位址：https://github.com/MoTec95/CustomPop

相關推薦：

微信小程式實例：分享給一個人還是分享到群組的判斷程式碼

微信小程式在上傳圖片時如何限制大小（附程式碼）

小程式：如何動態增加刪除JSON物件數組（附程式碼）

以上是小程式：防止點擊遮罩層後遮罩層下方也反應的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！