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>

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯练习题——归并排序

1.火柴排队 思路 1.求最小值的时候&#xff0c;可以直接按升序排序&#xff0c;这样得到的值就是最小值 2.求最小交换次数的时候&#xff0c;不能直接排序&#xff0c;因为只能交换相邻的数&#xff0c;只需要知道他们的相对大小&#xff0c;所以可以先用离散化&#xff0c;把…

C及C++每日练习(3)

选择题&#xff1a; 1.以下程序的输出结果是&#xff08;&#xff09; #include <stdio.h> main() { char a[10] {1, 2, 3, 4, 5, 6, 7, 8, 9, 0}, *p; int i; i 8; p a i; printf("%s\n", p - 3); } A.6 B. 6789 C. 6 D.789 对于本题&#xff0…

【视频图像取证篇】模糊图片复原车牌号技术原理和实战应用小结

【视频图像取证篇】模糊图片复原车牌号技术原理和实战应用小结 模糊图片复原车牌号常用的技术原理和实战应用—【蘇小沐】 &#xff08;一&#xff09;运动模糊视频图像 由于各种各样的原因&#xff0c;主体或者拍摄设备运动共同造成的视频图像模糊等。 1、快门速度 快门速…

【虚拟换衣+论文+代码】2403.OOTDiffusion:高分辨率(1024x768)可控的虚拟试穿(已开源,暂不能训练)

项目地址&#xff1a;https://github.com/levihsu/OOTDiffusion 试用地址&#xff1a;https://ootd.ibot.cn/ 论文地址&#xff1a;2403.OOTDiffusion: 基于衣服融合的可控虚拟试穿潜在扩散 | readpaper arxiv: Outfitting Fusion based Latent Diffusion for Controllable Vir…

第三节:在Sashulin中自定义组件

上一节讲解了如何建立一个业务消息流&#xff0c;流程是由组件构成的。目前SMS提供了General、Database、MessageQueue、Socket、WebService、Http、Internet等系列常用组件&#xff0c;如果不满足业务需求&#xff0c;可以进行自定义组件开发。 一、组件开发 1、建立一个Jar…

二维码门楼牌管理系统应用场景:推动旅游与文化产业的智慧化升级

文章目录 前言一、二维码门楼牌管理系统在旅游领域的应用二、二维码门楼牌管理系统在文化产业的应用三、结语 前言 随着信息技术的不断发展&#xff0c;二维码门楼牌管理系统作为一种创新的信息化手段&#xff0c;正在逐渐渗透到旅游和文化领域。它通过为文化景点、旅游景点和…

面试经典150题——两数相加

​Anything is worth "fighting for," and when you get it, dont doubt it, you deserve it, you deserve it. 1. 题目描述 2. 题目分析与解析 2.1 思路一 这个题目虽然标的是中等&#xff0c;但是大家看一下应该还是比较容易想到思路的&#xff0c;这不就相当于…

华为通过FTP 进行文件操作示例

通过FTP进行文件操作示例 组网图形 图1 通过FTP进行文件操作组网图 通过FTP进行文件操作简介配置注意事项组网需求配置思路操作步骤配置文件相关信息 通过FTP进行文件操作简介 配置设备作为FTP服务器&#xff0c;用户可以在终端通过FTP客户端软件访问设备&#xff0c;在本…

深入理解 HTTP Authorization 头:基础知识

在当今的互联网世界中&#xff0c;安全性贯穿于 web 应用的每个方面&#xff0c;HTTP Authorization 头的使用在这个过程中扮演着不可或缺的角色。它是 HTTP 请求中的一个重要部分&#xff0c;用来在客户端和服务器之间安全地传输认证信息。用途广泛&#xff0c;无论是浏览器还…

外包干了1个多月,技术退步明显...

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 这次来聊一个大家可能也比较关心的问题&#xff0c;那就是就业城…

JS-04-javaScript数据类型和变量

一、数据类型 计算机能处理的远不止数值&#xff0c;还可以处理文本、图形、音频、视频、网页等各种各样的数据&#xff0c;不同的数据&#xff0c;需要定义不同的数据类型。在JavaScript中定义了以下几种数据类型&#xff1a; 1-1、Number JavaScript不区分整数和浮点数&…

听 GPT 讲 client-go 源代码 (23)

分享更多精彩内容&#xff0c;欢迎关注&#xff01; File: client-go/kubernetes/scheme/register.go 在client-go项目中&#xff0c;client-go/kubernetes/scheme/register.go文件的作用是进行Kubernetes API对象的Scheme注册。 Scheme是一个用于序列化和反序列化Kubernetes A…

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

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

官网正在被哪些产品蚕食,定制网站又被哪些建站产品挤占。

2023-12-09 16:22贝格前端工场 官网建设是一个被大多数人看衰的市场&#xff0c;本文来理性分析下&#xff0c;谁在蚕食这个市场&#xff0c;谁又在挤占这个产品生存空间&#xff0c;欢迎大家评论&#xff0c;探讨。 网站正在被以下产品形式取代&#xff1a; 1. 移动应用&…

探索数据结构:单链表的实战指南

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;数据结构与算法 贝蒂的主页&#xff1a;Betty‘s blog 前言 在上一章节中我们讲解了数据结构中的顺序表&#xff0c;知道了顺序…

【Spring知识体系】1.1 Java 注解(Annotation)

文章目录 1.1 注解&#xff08;Annotation&#xff09;1.1.1 什么是注解1.1.2 内置注解1.1.3 元注解&#xff08;5种&#xff09;1.14 自定义注解1.15 注解使用场景介绍※ 本文小结 1.1 注解&#xff08;Annotation&#xff09; 1.1.1 什么是注解 注解的定义&#xff1a;它提…

Java中接口新增的方法(默认方法,静态方法,私有方法)

Java中接口新增的方法&#xff08;默认方法&#xff0c;静态方法&#xff0c;私有方法&#xff09;

遗传算法理解与代码实战(二)- demo(python+deap)

前文介绍了遗传算法&#xff0c;并且手动python代码进行了实践&#xff0c;但是在遇到复杂的问题时&#xff08;遗传算法理解与代码实战&#xff08;三&#xff09;会介绍&#xff09;&#xff0c;手写代码很麻烦&#xff0c;所以需要借助专门的遗传算法库来实现&#xff0c;这…

使用Python快速提取PPT中的文本内容

直接提取PPT中的文本内容可以方便我们进行进一步处理或分析&#xff0c;也可以直接用于其他文档的编撰。通过使用Python程序&#xff0c;我们可以快速批量提取PPT中的文本内容&#xff0c;从而实现高效的信息收集或对其中的数据进行分析。本文将介绍如何使用Python程序提取Powe…

Vue | 基于 vue-admin-template 项目的跨域问题解决方法

目录 一、现存问题 二、解决方法 2.1 修改的第一个地方 2.2 修改的第二个地方 2.3 修改的第三个地方 自存 一、现存问题 报错截图如下&#xff1a; 二、解决方法 2.1 修改的第一个地方 在 .env.development 文件中&#xff1a; # base api # VUE_APP_BASE_API /d…