Mini Program: A solution to prevent the reaction below the mask layer from happening after clicking on the mask layer

The content of this article is about the mini program: the solution to prevent the reaction below the mask layer after clicking on the mask layer. It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

Recently when making custom pop-up windows, it is inevitable to use a mask layer or masking layer.

But the key is that after there is a mask layer, clicking the component under the mask layer will still generate a click event.

So how to solve this problem?

There are several methods given on the Internet
1. Add the catchtouchmove click event in the mask layer view. Because the catch event binding can prevent bubbling events from bubbling upwards.

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

2. Dynamically add position:fixed;

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

Through practice, the first two mentioned on the Internet are not feasible. For the first one, I wonder if my posture is wrong. ! The second type is pure deception! Or maybe it was just a coincidence that his project worked.

The method introduced below is very good.

3. Use wx:if and wx:else or hidden to control display. When the mask layer pops up, the component is not displayed.
As for using wx:if or hidden, generally speaking, wx:if has a higher switching cost and hidden has a higher initial rendering cost. Therefore, if frequent switching is required, hidden is better, and wx:if is better if conditions are unlikely to change at runtime. You can refer to the official documentation for instructions.

<!-- 遮罩层  --><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>

Here is a brief talk about the style of the mask layer

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

There are thousands of solutions to the problem, and you will get unexpected gains by changing the angle.

Project address: https://github.com/MoTec95/CustomPop

Related recommendations:

WeChat Mini Program Example: Share with one person Or the judgment code for sharing to the group

How to limit the size of WeChat applet when uploading pictures (with code)

Mini program: how to dynamic Add and delete JSON object array (with code)

The above is the detailed content of Mini Program: A solution to prevent the reaction below the mask layer from happening after clicking on the mask layer. For more information, please follow other related articles on the PHP Chinese website!