小程序防止点击遮罩层后遮罩层下面也反应（有点击事件）

墨蓝 2022-05-17 11:56 479阅读 0赞

最近在做自定义弹窗，不免会使用到遮罩层或者说蒙层。

但是关键是，有遮罩层后，再点击遮罩层下的组件，依然会产生点击事件。

那如何解决这个问题呢 ？

网上给出了几种方法  
1 . 在遮罩层 view 中添加 catchtouchmove 点击事件。因为 catch 事件绑定可以阻止冒泡事件向上冒泡。

2 . 给底层页面动态添加 position:fixed;

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

通过实践，网上说的前面两种是不可行的，对于第一种，不知是不是我姿势不对！第二种纯属坑蒙拐骗！或者说他的项目能行是机缘巧合。

下面介绍的这种方法倒是非常不错。

3 . 使用 wx:if 和 wx:else 或 hidden 控制显示。**当弹出遮罩层时，不显示组件。**  
至于使用 wx:if 还是 hidden，一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。可以参考[官方文档][Link 1]的说明。

<view class="mask" wx:if="{
       {hasMask}}"/>
    
    <view wx:else='{
       {!hasMask}}' style='text-align:center;margin-top:50px;'>
    	
      <button bindtap="showMask" type='primary' style='width:50%;' >点我弹窗</button>
    </view>

这里简单的说一下遮罩层的样式

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

> 问题的解决方案千百种，多换角度会有意想不到的收获。

项目地址：https://github.com/MoTec95/CustomPop

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/conditional.html