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

最新推荐文章于 2024-06-09 12:44:57 发布

是席木木啊

最新推荐文章于 2024-06-09 12:44:57 发布

阅读量1.1k

点赞数 7

分类专栏： Vue 文章标签：前端 vue.js passive

本文链接：https://blog.csdn.net/weixin_43524214/article/details/136574108

版权

Vue 专栏收录该内容

57 篇文章 10 订阅

订阅专栏

passive修饰符用于避免浏览器频繁检查是否阻止默认事件行为，以减少滑动操作时的卡顿。尤其适用于滚动监听，通过告知浏览器无需查询，提高滚动流畅度。但需注意passive与preventDefault不能同时使用。

摘要由CSDN通过智能技术生成

.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>