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>

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

（编辑：湖南网）

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