vue中wheel使用passive事件修饰符遇到的问题

最新推荐文章于 2024-08-07 16:55:16 发布

拾一路芳华

最新推荐文章于 2024-08-07 16:55:16 发布

阅读量2.1k

点赞数 2

分类专栏： Vue学习文章标签： vue

本文链接：https://blog.csdn.net/No_cookie/article/details/124075711

版权

本文探讨在Vue中使用@wheel.passive修饰符时遇到的问题。passive修饰符旨在让事件的默认行为如滚轮滚动先行执行，但实际应用中发现并未按预期工作。在对代码进行调整，为ul元素添加背景颜色后，passive事件修饰符似乎开始生效。文章作者寻求对此现象的解释，并欢迎Vue社区的大佬们指正错误。

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

passive的作用

让事件的默认行为立即执行，无需等待事件回调执行完毕

@wheel.passive

让鼠标滚轮滚动的时候先触发默认行为再执行事件回调
用该事件验证passive的作用，代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wheel</title>
    <script src="../js/vue.js"></script>
</head>
<style>
    * {
   
        box-sizing: border-box;
        margin: 10px 0;
    }
    
    ul {
   
        height: 500px;
        width: 500px;
        overflow: auto;
    }
    
    li {
   
        height: 300px;
        background-color