HTML5移动端开发遇见的东西

.mask { position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba($color: #333, $alpha: .6); .content { padding: 20px; background-color: #fff; width: 300px; } }

效果如下：

可以看到，当在遮罩上滑动的时候，是会穿透到父节点的，最简单的办法就是阻住默认行为：

document.querySelector(".mask").addEventListener("touchmove", event => { event.preventDefault(); });

如果在vue中，你可以这么写：

<div class="mask" @touchumove.prevent></div>

如果.content也有滚动条，那么只要阻止遮罩本身就行：

document.querySelector(".mask").addEventListener("touchmove", event => { if (event.target.classList.contains("mask")) event.preventDefault(); });

或者：

<div class="mask" @touchumove.self.prevent></div>

这样，当出现遮罩的时候用户的滑动就会被锁住啦

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!