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. Mysql数据库下载

    链接:https://pan.baidu.com/s/1ZwkY_Twsil7acvtCJ4ljgQ 提取码:t5ih

  2. 这份Java Web必读书单,值得所有Java工程师一看!

    点击蓝色"程序员书单"关注我哟 加个"星标",每天带你读好书! 经过了10多年的发展,Java Web从开发框架到社区都已经非常成熟,而目前市面上最流行的Jav ...

  3. Scala函数式编程(六) 懒加载与Stream

    前情提要 Scala函数式编程指南(一) 函数式思想介绍 scala函数式编程(二) scala基础语法介绍 Scala函数式编程(三) scala集合和函数 Scala函数式编程(四)函数式的数据结 ...

  4. 二、Python2.7的安装并与Python3.8共存

    一:Python解释器为什么要2个版本? 众所周知,Python2.7是一个过渡版本. 很多公司写的项目并不是基于最新的Python3写的,在之后进行一些项目更改的时候,Python3的语法有一些并不 ...

  5. logback日志实战

    <?xml version="1.0" encoding="UTF-8" ?> <!-- <configuration> < ...

  6. MAC 系统java开发环境搭建教程

    1.在安装JDK之前,先查看下自己电脑是否已经安装了JDK. 打开终端,输入java -version并回车.     从上图中可以看出我们已安装了,JDK 8.如果这个版本是你需要的版本,可直接看4 ...

  7. Java 理论与实践: 流行的原子

    Java 理论与实践: 流行的原子 新原子类是 java.util.concurrent 的隐藏精华 在 JDK 5.0 之前,如果不使用本机代码,就不能用 Java 语言编写无等待.无锁定的算法.在 ...

  8. 本地项目推送到Github

    1.在github上repositories新建一个git项目工程 2.使用git,把刚建好的项目clone到本地 3.把本地项目中的文件全部移动到下载下来的git项目中,以下是我本地项目中的文件 4 ...

  9. vue的组件缓存(返回页面不刷新)

    每次使用返回是页面总是会刷新 导致了一些体验上的不愉快 现在 发现vue中的一个很方便的方法还可以用来优化性能就是: keep-alive缓存组件 <router-view v-if=" ...

  10. Ansible简明教程

    Ansible是当下比较流行的自动化运维工具,可通过SSH协议对远程服务器进行集中化的配置管理.应用部署等,常结合Jenkins来实现自动化部署. 除了Ansible,还有像SaltStack.Fab ...