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】LAMP环境搭建(简易版)
一. 辅助软件包安装 准备工作:1.Linux系统准备 恢复快照(初始化安装) 设置IP 关闭SELINUX 配置yum源 2.yum -y install gcc gcc-c++ 3.关闭防火墙 4 ...
- 原生js,jquery通过ajax获得后台json数据动态新增页面元素
一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...
- C语言变长数组
#include <stdio.h> #include <stdlib.h> #include <string.h> typedef struct Variable ...
- CH5701 开车旅行(倍增dp+set)
传送门 解题思路: 一道比较有趣的题,解题工作主要分为两块: ①找出k(k=0表示小A先走,k=1表示小B先走,下面同理)从点i出发下一个到达的点to[k][i]; 一开始偷懒用了vector(偷懒一 ...
- std::string 字符串分割
#include <iostream> #include <string> #include <vector> std::vector<std::string ...
- Spring Cloud和eureka启动报错 解决版本依赖关系
导读 An attempt was made to call a method that does not exist. The attempt was made from the following ...
- 用一个完整的案例讲解Python数据分析的整个流程和基础知识
先来想一下数据分析的流程,第一步获取数据,因此本节内容就是获取数据以及对数据的基本操作. 1.数据导入 1.1 导入.xlsx文件 要导入一个.xlsx后缀的Excel文件,可以使用pd.read_e ...
- 落谷 P1734 最大约数和
题目描述 选取和不超过S的若干个不同的正整数,使得所有数的约数(不含它本身)之和最大. 输入格式 输入一个正整数S. 输出格式 输出最大的约数之和. 输入输出样例 输入 #1复制 11 输出 #1复制 ...
- JavaScript数据类型 —— 基础语法(2)
JavaScript基础语法(2) 数据类型 js中有六种数据类型,包括五种基本数据类型(Number,String,Boolean,Undefined,Null),和一种复杂数据类型(Object) ...
- vue-cli目录结构分析
vue3初始化一个项目,查看其项目结构,会发现比vue2的更加简洁. package.json说明 项目的配置文件,定义了项目的基本信息以及项目的相关包依赖,npm运行命令等,位于项目根目录. scr ...