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. android学习相关intent和fragment的先关知识点

    对于使用intent,主要是用来进行活动之间的跳转,然后就是通过intent向下一个活动传递数据,还有就是想上一个活动传递数据. 实例: 先添加按钮的点击事件,当点击按钮时进行事件的触发,主要代码是 ...

  2. Pyspider的基本使用

    Pyspider的基本使用 pyspider的任务流程: 每个pyspider的项目对应一个Python的脚本,该脚本中定义了一个Handler类,它有一个on_start方法.爬取首先调用on_st ...

  3. go 基础安装

    一.安装: 1.下载GO的地址:https://golang.org/dl/ 点击安装包进行安装(linux直接解压) 设置环境变量(linux) 1. export GOROOT=$PATH:/pa ...

  4. Linux网络安全篇,配置Yum源(一),本地Yum源

    1.创建挂载目录 mkdir /mnt/cdrom 2.挂载软件源cdrom mount /dev/cdrom /mnt/cdrom/ 3.建立本地yum源资源文件夹 mkdir /usr/local ...

  5. ListView + ArrayAdapter + 接口回调

    众所周知,ListView是安卓最为频繁使用的控件,但是,随着人们审美观的提高,一些初级的ListView已经满足不了需求了,于是,我们必须为自己定制一套专属的ListView,这就需要用到适配器,A ...

  6. bootstraptable 必备知识点

    1.如何动态刷新表中数据? (1).无参刷新: $("#table").bootstrapTable('refresh'); (2).带参刷新: var opt = { url: ...

  7. R语言—如何安装Github包的解决方法,亲测有效

    R语言—如何安装Github包的解决方法,亲测有效 准备安装材料: R包-REmap GitHub下载地址:https://github.com/lchiffon/REmap R包-baidumap ...

  8. Django -->admin后台(后台管理可以直接往数据库添加数据)

    一.使用pymysql时,必须加这两行(#如果使用mysql的数据库,请进行伪装 pymysql伪装为MySQLdb) import pymysqlpymysql.install_as_MySQLdb ...

  9. JS 浏览器BOM-->简介和属性

    1.简介: BOM:浏览器对象模型(Browser Object Model),是一个用于访问浏览器和计算机屏幕的对象集合.我们可以通过全局对象window来访问这些对象.  2.属性 window. ...

  10. 宏定义#define和内联函数inline的区别

    1 宏定义在预编译的时候进行字符串替换.内联函数在编译的时候进行函数展开. 2 宏定义没有类型检查.内联函数会进行参数列表.返回值等类型检查.