uni-app实现背景遮罩不能触碰
时间: 2023-08-03 14:08:35 浏览: 194
HTML实现遮罩层的方法 HTML中如何使用遮罩层
可以通过在背景遮罩上添加一个阻止触摸事件的 div 元素来实现。具体步骤如下:
1. 在页面中添加一个背景遮罩元素,并设置其 z-index 值比其他元素小,以覆盖整个页面。
2. 在背景遮罩元素上添加一个绝对定位的 div 元素,并设置其宽高为 100%,并设置 z-index 值比背景遮罩元素大。
3. 在 div 元素上添加一个阻止触摸事件的 touchstart 或 touchmove 事件,代码如下:
```javascript
document.querySelector('.mask .disable-touch').addEventListener('touchstart', function(e) {
e.preventDefault();
}, {passive: false});
document.querySelector('.mask .disable-touch').addEventListener('touchmove', function(e) {
e.preventDefault();
}, {passive: false});
```
这样,当用户触摸背景遮罩时,所有事件都会被阻止,从而实现了背景遮罩不能触碰的效果。
阅读全文