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>社会</ ...
随机推荐
- Mysql数据库下载
链接:https://pan.baidu.com/s/1ZwkY_Twsil7acvtCJ4ljgQ 提取码:t5ih
- 这份Java Web必读书单,值得所有Java工程师一看!
点击蓝色"程序员书单"关注我哟 加个"星标",每天带你读好书! 经过了10多年的发展,Java Web从开发框架到社区都已经非常成熟,而目前市面上最流行的Jav ...
- Scala函数式编程(六) 懒加载与Stream
前情提要 Scala函数式编程指南(一) 函数式思想介绍 scala函数式编程(二) scala基础语法介绍 Scala函数式编程(三) scala集合和函数 Scala函数式编程(四)函数式的数据结 ...
- 二、Python2.7的安装并与Python3.8共存
一:Python解释器为什么要2个版本? 众所周知,Python2.7是一个过渡版本. 很多公司写的项目并不是基于最新的Python3写的,在之后进行一些项目更改的时候,Python3的语法有一些并不 ...
- logback日志实战
<?xml version="1.0" encoding="UTF-8" ?> <!-- <configuration> < ...
- MAC 系统java开发环境搭建教程
1.在安装JDK之前,先查看下自己电脑是否已经安装了JDK. 打开终端,输入java -version并回车. 从上图中可以看出我们已安装了,JDK 8.如果这个版本是你需要的版本,可直接看4 ...
- Java 理论与实践: 流行的原子
Java 理论与实践: 流行的原子 新原子类是 java.util.concurrent 的隐藏精华 在 JDK 5.0 之前,如果不使用本机代码,就不能用 Java 语言编写无等待.无锁定的算法.在 ...
- 本地项目推送到Github
1.在github上repositories新建一个git项目工程 2.使用git,把刚建好的项目clone到本地 3.把本地项目中的文件全部移动到下载下来的git项目中,以下是我本地项目中的文件 4 ...
- vue的组件缓存(返回页面不刷新)
每次使用返回是页面总是会刷新 导致了一些体验上的不愉快 现在 发现vue中的一个很方便的方法还可以用来优化性能就是: keep-alive缓存组件 <router-view v-if=" ...
- Ansible简明教程
Ansible是当下比较流行的自动化运维工具,可通过SSH协议对远程服务器进行集中化的配置管理.应用部署等,常结合Jenkins来实现自动化部署. 除了Ansible,还有像SaltStack.Fab ...