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>社会</ ...
随机推荐
- Spring(一):Spring入门程序和IoC初步理解
本文是按照狂神说的教学视频学习的笔记,强力推荐,教学深入浅出一遍就懂!b站搜索狂神说或点击下面链接 https://space.bilibili.com/95256449?spm_id_from=33 ...
- tornado实现不同app路由分发
tornado实现app路由分发 from tornado import ioloop from tornado.httpserver import HTTPServer from tornado.w ...
- flask-include、set、with、模板继承
flask-include.set.with include: 跟django的include类似,将一个html的代码块直接嵌入另一个html文件中 {% include 'html ...
- java京东自动登录
大部分代码都是参考的这边,我只是在他的逻辑上实现了自动通过验证码,放上主逻辑的代码吧,图片识别我用的若快,可以去接其他平台 https://blog.csdn.net/u013232789/artic ...
- 【Selenium05篇】python+selenium实现Web自动化:读取ini配置文件,元素封装,代码封装,异常处理,兼容多浏览器执行
一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第五篇博 ...
- 线程绑定cpu
#include <stdio.h> #include <pthread.h> #include <sys/sysinfo.h> #include <unis ...
- D. Ehab the Xorcist
题意: 略: 感觉被演了一波,这是CFdiv2吗? 算是这个构造题吧. 1 首先我们可以将u进行二进制拆分来考虑.加入u>v那么小与v的那些数在怎么拼接也无法使异或值为u. 比如二进制U=1 0 ...
- J - Recommendations CodeForces - 1315D
https://blog.csdn.net/w_udixixi/article/details/104479288 大意:n个数,每个数只能向上加,a[i]+1需要的时间是t[i],求使这n个数无重复 ...
- mybatis源码学习:从SqlSessionFactory到代理对象的生成
目录 一.根据XML配置文件构建SqlSessionFactory 二.通过SqlSessionFactory创建SqlSession 三.getMapper获取动态代理对象 一.根据XML配置文件构 ...
- 微信小程序标签常见知识点归纳整理
1. <image src='/images/logo.png' mode='widthFix'></image> mode 属性表示图片随着指定的宽度自动拉伸以显示原图的正确 ...