vue中提供 @touchmove.prevent 方法可以完美解决这个问题。

<div class="child" @touchmove.prevent ></div>

vue同时还提供了其他的修饰符:

阻止单击事件继续传播 :

<a v-on:click.stop="doThis"></a> 

提交事件不再重载页面 :

<form v-on:submit.prevent="onSubmit"></form> 

修饰符可以串联  :

<a v-on:click.stop.prevent="doThat"></a> 

只有修饰符  :

<form v-on:submit.prevent></form> 

添加事件监听器时使用事件捕获模式, 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 :

<div v-on:click.capture="doThis">...</div> 

只当在 event.target 是当前元素自身时触发处理函数 ,即事件不是从内部元素触发的 :

<div v-on:click.self="doThat">...</div>

vue 遮罩层阻止默认滚动事件的更多相关文章

  1. 谷歌下解决Pop遮罩层无法遮挡滚动栏下问题

    今天用pop的弹出窗体里,出现一个问题,当网页出现滚动栏里,不能遮挡住,解决Pop遮罩层无法遮挡滚动栏下问题. 可通过下载获取改动后的代码----->进入下载

  2. 纯JS阻止浏览器默认滚动事件,实现自定义滚动方法

    首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...

  3. 解决css3遮罩层挡住下面元素事件的方法

    比如大家常看到的鼠标移入图片中,会有一个挡住图片的黑色半透明遮罩层,上面还有文字介绍,这时候就会遇到该层遮挡住下面图片的跳转链接事件,这时候怎么办呢?有个简单的css3属性可以快速解决该问题:poin ...

  4. 键盘压缩背景,ios滚动不流畅,禁止遮罩层下面内容滚动

    1.<!--防止软键盘压缩页面背景图片--> <script> const bodyHeight = document.documentElement.clientHeight ...

  5. 阻止默认/冒泡事件(兼容ie)

    (1) 阻止默认事件 function(e){ if(e && e.preventDefault){ e.preventDefault(); }else{ //IE window.ev ...

  6. vue click.stop阻止点击事件继续传播

    <div id="app"> <div @click="dodo"> <button @:click="doThis&q ...

  7. 微信小程序页面阻止默认滑动事件

    在页面上要加入一个悬浮的按钮,这个按钮需要可以拖动,在元素中使用catchtouchstart,catchtouchmove,catchtouchend来控制悬浮按钮的拖动,但是在ios系统中,微信小 ...

  8. vue解决遮罩层滚动方法

    vue 遮罩层阻止默认滚动事件 在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面. vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class=& ...

  9. JS弹出层制作,以及移动端禁止弹出层下内容滚动,overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

随机推荐

  1. Spring(一):Spring入门程序和IoC初步理解

    本文是按照狂神说的教学视频学习的笔记,强力推荐,教学深入浅出一遍就懂!b站搜索狂神说或点击下面链接 https://space.bilibili.com/95256449?spm_id_from=33 ...

  2. tornado实现不同app路由分发

    tornado实现app路由分发 from tornado import ioloop from tornado.httpserver import HTTPServer from tornado.w ...

  3. flask-include、set、with、模板继承

    flask-include.set.with include: 跟django的include类似,将一个html的代码块直接嵌入另一个html文件中 {%   include    'html    ...

  4. java京东自动登录

    大部分代码都是参考的这边,我只是在他的逻辑上实现了自动通过验证码,放上主逻辑的代码吧,图片识别我用的若快,可以去接其他平台 https://blog.csdn.net/u013232789/artic ...

  5. 【Selenium05篇】python+selenium实现Web自动化:读取ini配置文件,元素封装,代码封装,异常处理,兼容多浏览器执行

    一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第五篇博 ...

  6. 线程绑定cpu

    #include <stdio.h> #include <pthread.h> #include <sys/sysinfo.h> #include <unis ...

  7. D. Ehab the Xorcist

    题意: 略: 感觉被演了一波,这是CFdiv2吗? 算是这个构造题吧. 1 首先我们可以将u进行二进制拆分来考虑.加入u>v那么小与v的那些数在怎么拼接也无法使异或值为u. 比如二进制U=1 0 ...

  8. J - Recommendations CodeForces - 1315D

    https://blog.csdn.net/w_udixixi/article/details/104479288 大意:n个数,每个数只能向上加,a[i]+1需要的时间是t[i],求使这n个数无重复 ...

  9. mybatis源码学习:从SqlSessionFactory到代理对象的生成

    目录 一.根据XML配置文件构建SqlSessionFactory 二.通过SqlSessionFactory创建SqlSession 三.getMapper获取动态代理对象 一.根据XML配置文件构 ...

  10. 微信小程序标签常见知识点归纳整理

    1. <image src='/images/logo.png' mode='widthFix'></image> mode 属性表示图片随着指定的宽度自动拉伸以显示原图的正确 ...