移动端 滑动表层div时禁止底层div滑动 就是遮罩层

本文主要是介绍移动端 滑动表层div时禁止底层div滑动 就是遮罩层，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在遮罩层添加 @touchmove.prevent

用法

<div v-show="ishow" class="fiex" @touchmove.prevent><div @click="hide" class="hide"></div>
<div  :time_="tim" class="time_body">

如果弹窗不在遮罩层内部，那么冒泡就不会经过遮罩层，也就无法屏蔽滑动了0.0

    <div class="overlayer" @touchmove.prevent ></div><div class="popup">如果在这个div中滑动，触发的事件是不会经过overlayer的，也就无法屏蔽滑动了</div>

如果实在不能把弹窗放到遮罩层内，那么给弹窗加一个单独的 .prevent 修饰符也可以，下面这两种方式都是有效的：

   <!--plan A--><div class="overlayer" @touchmove.prevent ><div class="popup">如果在这个div中滑动，触发的事件会经过overlayer，可以屏蔽滑动</div></div><div class="overlayer" @touchmove.prevent ></div><div class="popup"  @touchmove.prevent>如果在这个div中滑动，触发的事件也会被禁用默认行为, 也可以屏蔽滑动</div>

pc

这种屏蔽方式只是屏蔽了滑动，对于PC端的鼠标滚轮是无效的，但屏蔽鼠标滚轮也很简单，把 touchmove 事件处理器改成 scroll 事件的处理器就好了~就像这样：

    <div class="overlayer" @scroll.prevent ></div>

 

 

 

这篇关于移动端 滑动表层div时禁止底层div滑动 就是遮罩层的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---