php点击弹遮罩层,小程序:防止点击遮罩层后遮罩层下面也反应的解决方法

本文介绍了在小程序开发中遇到的遮罩层点击后,底层组件仍然响应点击事件的问题。提出了两种解决方案:1) 使用catchtouchmove事件阻止冒泡;2) 修改底层页面CSS为position:fixed。通过这些方法可以有效防止遮罩层下的组件被误触。项目源码可在GitHub找到。

本篇文章给大家带来的内容是关于小程序:防止点击遮罩层后遮罩层下面也反应的解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

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

那如何解决这个问题呢 ?

网上给出了几种方法

1 . 在遮罩层 view 中添加 catchtouchmove 点击事件。因为 catch 事件绑定可以阻止冒泡事件向上冒泡。

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

点我弹窗

这里简单的说一下遮罩层的样式/* 遮罩层 */.mask{ width: 100%; height: 100%; background: #000; opacity: 0.5; z-index: 9000;}问题的解决方案千百种,多换角度会有意想不到的收获。

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

相关推荐:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值