Vue事件处理:.passive修饰符与应用场景

.passive修饰符

        passive这个修饰符会执行默认方法。你们可能会问,明明默认执行为什么会设置这样一个修饰符。这就要说一下这个修饰符的本意了。
        浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时,才能知道内部是否会调用preventDefault函数来阻止事件的默认行为,所以浏览器本身是没有办法对这种场景进行优化的。这种场景下,用户的手势事件无法快速产生,会导致页面无法快速执行滑动逻辑,从而让用户感觉到页面卡顿。
        通俗点说就是每次事件产生,浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器,不用查询了,我们没用preventDefault阻止默认动作。

应用场景

        .passive修饰符一般用在滚动监听,@scoll,@touchmove 。因为滚动监听过程中,移动每个像素都会产生一次事件,每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过,可以大大提升滑动的流畅度
注:passive和prevent冲突,不能同时绑定在一个监听器上。

使用举例

<style>
.wrapper-class{height: 100%;overflow:hidden;overflow-y: scroll;
}
</style>
<template><div class="wrapper-class" v-on:scroll.passive="console.log('passive..')">一大段内容,可以自己填充</div>
</template>
<script>
export default{data(){return {}}
}
</script>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/730758.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

接口自动化测试用例的编写方法

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 phpunit 接口自动化测试系列 Post接口自动化测试用例 Post方式…

2007-2022年上市公司迪博内部控制评价缺陷数量数据

2007-2022年上市公司迪博内部控制评价缺陷数量数据 1、时间&#xff1a;2007-2022年 2、范围&#xff1a;上市公司 3、指标&#xff1a;证券代码、证券简称、辖区、证监会行业、申万行业、是否存在财报内控重大缺陷、财报内控重大缺陷数量、是否存在财报内控重要缺陷、财报内…

植物病害识别:YOLO甘蔗叶片病害识别分类数据集

YOLO甘蔗叶片病害识别数据集, 包含尾孢菌叶斑病&#xff0c;眼斑病&#xff0c;健康&#xff0c;红腐病&#xff0c;锈病&#xff0c;黄叶病6个常见病类别&#xff0c;3300多张图像&#xff0c;yolo标注完整&#xff0c;全部原始图像&#xff0c;未应用增强。 适用于CV项目&…

【Web - 框架 - Vue】随笔 - Vue的简单使用(01) - 快速上手

【Web - 框架 - Vue】随笔 - Vue的简单使用(01) - 快速上手 Vue模板代码 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>模板</title> </head> <body> <div></di…

内容检索(2024.03.08)

随着创作数量的增加&#xff0c;博客文章所涉及的内容越来越庞杂&#xff0c;为了更为方便地阅读&#xff0c;后续更新发布的文章将陆续在此汇总并附上原文链接&#xff0c;感兴趣的小伙伴们可持续关注文章发布动态&#xff01; 本期更新内容&#xff1a; 1. 电源完整性理论与…

CMake笔记

CMake笔记 文章目录 CMake笔记1 工程项目一般形式2 常见命令2.1 project2.2 set2.3 message2.4 add_executable()2.5 语法原则2.6 add_subdirectory2.7 add_library2.8 list 3 安装3.1 安装.h文件/文本文件3.2 安装工程脚本3.3 安装目录/目录下内容3.4 安装库文件3.5安装过程 4…

cocos creator 3.7.2使用shader实现图片扫光特效

简介 功能&#xff1a;图片实现扫光效果 引擎&#xff1a;cocos Creator 3.7.2 开发语言&#xff1a;ts 完整版链接 链接https://lengmo714.top/284d90f4.html 效果图 shader代码 // Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd. CCEffect %{techniques:- pas…

CorelDRAW Graphics Suite2024免费试用体验15天版下载

使用基于全球知名的 Corel Painter 画笔技术构建的 100 款逼真像素画笔&#xff0c;以全新的方式将您独特的想法变为现实&#xff01;试用 CorelDRAW 的全新美术画笔&#xff0c;探索您的创意想法。 使用 CorelDRAW 中现在可用的远程字体&#xff0c;畅享更多创作自由&#xf…

【linux驱动开发】IO模型之同步IO、异步IO、IO多路复用

文章目录 IO的概述IO模型的实现阻塞IO非阻塞IOIO多路复用信号驱动异步IO 编译与测试说明 IO的概述 io&#xff0c;英文名称为inoput与output&#xff0c;表示输入与输出。 在冯诺依曼结构计算机中&#xff0c;计算机由 运算器、控制器、存储器、输入、输出五部分组成&#xf…

warning: #188-D: enumerated type mixed with another type

警告解释&#xff1a;枚举类型混合了其它的数据类型&#xff1b; 解决方法&#xff1a; 1&#xff1a;检查代码&#xff0c;是不是存在混用&#xff1b;&#xff1b; 2&#xff1a;结构体初始化为 0 报warning&#xff0c;不能将结构体的第一个变量&#xff0c;使用枚举类型&am…

安全防御第七次实验

需求&#xff1a;在FW7和FW8之间建立一条IPSEC通道保证10.0.2.0/24网段可以正常访问到192.168.1.0/24 一、NAT配置 FW4&#xff1a; FW6&#xff1a; 二、在FW4上做服务器映射 三、配置IPSEC FW5&#xff1a; FW6&#xff1a; 四、防火墙上的安全策略 FW4&#xff1a; FW5:…

VBA中类的解读及应用第十讲:限制文本框的输入,使其只能输入数值(上)

《VBA中类的解读及应用》教程【10165646】是我推出的第五套教程&#xff0c;目前已经是第一版修订了。这套教程定位于最高级&#xff0c;是学完初级&#xff0c;中级后的教程。 类&#xff0c;是非常抽象的&#xff0c;更具研究的价值。随着我们学习、应用VBA的深入&#xff0…

【动态规划.3】[IOI1994]数字三角形 Number Triangles

题目 https://www.luogu.com.cn/problem/P1216 观察下面的数字金字塔。 写一个程序来查找从最高点到底部任意处结束的路径&#xff0c;使路径经过数字的和最大。每一步可以走到左下方的点也可以到达右下方的点。 7→3→8→7→5 的路径产生了最大权值。 分析 这是一个动态规划…

抽象版忘记密码模板0.1版本

背景&#xff1a;用户密码忘了&#xff0c;无法登录&#xff0c;怎么办&#xff01;急&#xff01;急&#xff01;急&#xff01; 前置工作——Srpingboot3-maven项目&#xff0c;核心框架如下 <dependency><groupId>org.springframework.boot</groupId><…

Redis核心数据结构之字典(二)

字典 解决键冲突 当有两个或以上数量的键被分配到了一个哈希表数组的同一个索引上面&#xff0c;我们称这些键发生了冲突(collision)。 Redis的哈希表使用链地址法(separate chaining)来解决键冲突&#xff0c;每个哈希表节点都有一个next指针&#xff0c;多个哈希表节点可以…

数据库原理实验课(1)

目录 实验内容 安装头歌中的相关内容 具体过程 完结撒花~ 我也是第一次接触oracle的相关软件和操作&#xff0c;所以是一次傻瓜式教学记录 实验内容 安装头歌中的相关内容 具体过程 这是我在百度网盘中下载解压出来的oracle文件夹内的全部内容&#xff08;可能有因为安装完…

CodeSys通过C函数接口调用Qt

建议先查看之前的文章【CodeSys中调用C语言写的动态库】&#xff0c;了解如何创建一个能够被codesys调用的动态库。 假如想要在函数中使用Qt或者第三方库&#xff08;比如opencv等&#xff09;&#xff0c;可以在其自动生成的makefile文件中设置好相应的参数。 比如我这里就是…

2024037期传足14场胜负前瞻

2024037期售止时间为3月9日&#xff08;周六&#xff09;20点00分&#xff0c;敬请留意&#xff1a; 本期深盘多&#xff0c;1.5以下赔率4场&#xff0c;1.5-2.0赔率5场&#xff0c;其他场次是平半盘、平盘。本期14场整体难度中等。以下为基础盘前瞻&#xff0c;大家可根据自身…

力扣刷题Days13-101对称二叉树(js)

目录 1,题目 2&#xff0c;代码 2.1递归思想 2.2队列--迭代思想 3&#xff0c;学习与总结 1,题目 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 2&#xff0c;代码 2.1递归思想 return dfs(left.left, right.right) && dfs(left.right, right.l…

IDS入侵检测知识整理及lDS入侵检查表

【IDS入侵检测知识整理及lDS入侵检查表】 1. 网络入侵检测IDS概念 2. IDS分类 3. IDS的工作原理 4. IDS在网络中的部署 5. 入侵检查表 项目建设全套资料获取通道&#xff1a;软件开发全套资料_数字中台建设指南-CSDN博客