vue 遮罩层阻止默认滚动事件
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 遮罩层阻止默认滚动事件的更多相关文章
- 谷歌下解决Pop遮罩层无法遮挡滚动栏下问题
今天用pop的弹出窗体里,出现一个问题,当网页出现滚动栏里,不能遮挡住,解决Pop遮罩层无法遮挡滚动栏下问题. 可通过下载获取改动后的代码----->进入下载
- 纯JS阻止浏览器默认滚动事件,实现自定义滚动方法
首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...
- 解决css3遮罩层挡住下面元素事件的方法
比如大家常看到的鼠标移入图片中,会有一个挡住图片的黑色半透明遮罩层,上面还有文字介绍,这时候就会遇到该层遮挡住下面图片的跳转链接事件,这时候怎么办呢?有个简单的css3属性可以快速解决该问题:poin ...
- 键盘压缩背景,ios滚动不流畅,禁止遮罩层下面内容滚动
1.<!--防止软键盘压缩页面背景图片--> <script> const bodyHeight = document.documentElement.clientHeight ...
- 阻止默认/冒泡事件(兼容ie)
(1) 阻止默认事件 function(e){ if(e && e.preventDefault){ e.preventDefault(); }else{ //IE window.ev ...
- vue click.stop阻止点击事件继续传播
<div id="app"> <div @click="dodo"> <button @:click="doThis&q ...
- 微信小程序页面阻止默认滑动事件
在页面上要加入一个悬浮的按钮,这个按钮需要可以拖动,在元素中使用catchtouchstart,catchtouchmove,catchtouchend来控制悬浮按钮的拖动,但是在ios系统中,微信小 ...
- vue解决遮罩层滚动方法
vue 遮罩层阻止默认滚动事件 在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面. vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class=& ...
- JS弹出层制作,以及移动端禁止弹出层下内容滚动,overflow:hidden移动端失效问题
HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...
随机推荐
- 【Linux】Linux(一)Linux常用命令
一 命令行提示符 1.[root@localhost ~]# 当前登录用户@主机名:当前所在目录$ # 超级用户 $ 普通用户 当前所在目录:~ 用户家目录 管理员 /root 普通用户 /home ...
- 【数据库】MySQL数据库(四)
一.对数据的操作(详细版) 1.添加数据 1> insert into 表名 (字段1,字段2...) values (值1,值2...); 2> insert into 表名 (字段1, ...
- keras与卷积神经网络(CNN)实现识别minist手写数字
在本篇博文当中,笔者采用了卷积神经网络来对手写数字进行识别,采用的神经网络的结构是:输入图片——卷积层——池化层——卷积层——池化层——卷积层——池化层——Flatten层——全连接层(64个神经元) ...
- spring初级java 应用。搭建环境。基本语法
搭建环境完成之后.使用spring config editor打开配置的spring xml文件. 自己实现了,spring在java上的一些基本的应用.一共看了四节视频.下面是自己实现的编码: 最基 ...
- 2017蓝桥杯Excel地址(C++C组)
题目:Excel地址Excel单元格的地址表示很有趣,它使用字母来表示列号.比如,A表示第1列,B表示第2列,Z表示第26列,AA表示第27列,AB表示第28列,BA表示第53列,....当然Exce ...
- 搭建vue2.0开发环境及手动安装vue-devtools工具
安装vue脚手架 1.安装node.js,如果安装成功输入 node -v ,查看node版本号,输入npm -v查看npm版本 https://nodejs.org/en/ 2.注册淘宝镜像,定制的 ...
- 【小学数学】算术口诀 独立音频MP3
算术口诀 独立音频MP3 原文载于本人个人网站:http://www.unlimitedbladeworks.cc/writing_202004_01_sskj 特点 加法口诀 乘法口诀 独立音频 m ...
- WPF 仿语音播放 自定义控件
原理很简单,利用Path画一个图,然后用动画进行播放,播放时间由依赖属性输入赋值与控件内部维护的一个计时器进行控制. 控件基本是玩具,无法作为真实项目使用. 非专业UI,即使知道怎么画图也是画的不如意 ...
- C#多线程(6):线程通知
目录 AutoRestEvent 类 常用方法 一个简单的示例 解释一下 复杂一点的示例 解释 回顾一下,前面 lock.Monitor 部分我们学习了线程锁,Mutex 部分学习了进程同步,Sema ...
- 1/13 update
小组这几天的update大多都集中在UI方面: 答题界面更改了 放弃和提交按钮: 结果界面进行了颜色的调整,其中没有wordToAdd成员的不现实增加到单词本按钮: 分享结果增加APP的连接: