鍍金池/ 問答/網(wǎng)絡安全  HTML/ Vue v-on:scroll.passive的理解

Vue v-on:scroll.passive的理解

Vue官網(wǎng)教程中,說明了新屬性.passive將啟動被動監(jiān)聽器,即默認行為會理解觸發(fā)。我的理解是我可以在onSroll事件中寫個循環(huán)事件,然后如果快速滾動的過程不會受到onSroll內事件的阻塞。



<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發(fā) -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>


所以我這樣寫:





    <div id="example-5" v-on:scroll.passive="onScroll" style="width: 300px;height: 300px;border: 4px solid red;overflow: scroll;">
        sou la xi xi xi xi la xi la sou 吹著前奏望著天空 我想起花瓣試著掉落 為你翹課的那一天 花落的那一天 教室的那一間 我怎么看不見 消失的下雨天 我好想再淋一遍 沒想到失去的勇氣我還留著 好想再問一遍 你會等待還是離開
        刮風這天我試過握著你手 但偏偏雨漸漸大到我看你不見 還要多久我才能在你身邊 還要多久我才能夠在你身邊 等到放晴的那天也許我會比較好一點 等到放晴那天也許我會比較好一點 從前從前有個人愛你很久 但偏偏風漸漸把距離吹得好遠 偏偏風漸漸把距離吹得好遠
        但偏偏雨漸漸把距離吹得好遠 好不容易又能再多愛一天 但故事的最后你好像還是說了拜拜 但故事的最后你好像還是說了 sou la xi xi xi xi la xi la sou 吹著前奏望著天空 我想起花瓣試著掉落 為你翹課的那一天
        花落的那一天 教室的那一間 我怎么看不見 消失的下雨天 我好想再淋一遍 沒想到失去的勇氣我還留著 好想再問一遍 你會等待還是離開 刮風這天我試過握著你手 但偏偏雨漸漸大到我看你不見 還要多久我才能在你身邊 還要多久我才能夠在你身邊
        等到放晴的那天也許我會比較好一點 等到放晴那天也許我會比較好一點 從前從前有個人愛你很久 但偏偏風漸漸把距離吹得好遠 偏偏風漸漸把距離吹得好遠 但偏偏雨漸漸把距離吹得好遠 好不容易又能再多愛一天 但故事的最后你好像還是說了拜拜
        但故事的最后你好像還是說了 sou la xi xi xi xi la xi la sou 吹著前奏望著天空 我想起花瓣試著掉落 為你翹課的那一天 花落的那一天 教室的那一間 我怎么看不見 消失的下雨天 我好想再淋一遍 沒想到失去的勇氣我還留著
        好想再問一遍 你會等待還是離開 刮風這天我試過握著你手 但偏偏雨漸漸大到我看你不見 還要多久我才能在你身邊 還要多久我才能夠在你身邊 等到放晴的那天也許我會比較好一點 等到放晴那天也許我會比較好一點 從前從前有個人愛你很久 但偏偏風漸漸把距離吹得好遠
        偏偏風漸漸把距離吹得好遠 但偏偏雨漸漸把距離吹得好遠 好不容易又能再多愛一天 但故事的最后你好像還是說了拜拜 但故事的最后你好像還是說了 sou la xi xi xi xi la xi la sou 吹著前奏望著天空 我想起花瓣試著掉落
        為你翹課的那一天 花落的那一天 教室的那一間 我怎么看不見 消失的下雨天 我好想再淋一遍 沒想到失去的勇氣我還留著 好想再問一遍 你會等待還是離開 刮風這天我試過握著你手 但偏偏雨漸漸大到我看你不見 還要多久我才能在你身邊 還要多久我才能夠在你身邊
        等到放晴的那天也許我會比較好一點 等到放晴那天也許我會比較好一點 從前從前有個人愛你很久 但偏偏風漸漸把距離吹得好遠 偏偏風漸漸把距離吹得好遠 但偏偏雨漸漸把距離吹得好遠 好不容易又能再多愛一天 但故事的最后你好像還是說了拜拜
        但故事的最后你好像還是說了
    </div>
    <p>滾動 <span id="demo">0</span> 次。</p>



var x = 0;
let example5 = new Vue({
    el: "#example-5",
    methods: {
         onScroll: () => {
             for (var i = 0; i < 10000; i++) {
                   console.log(i);
             }
         document.getElementById("demo").innerHTML = x += 1;
         }
    }
})

但是感覺無論我設置.passive,或者.prevent或者不設置,滾動都不會受到for循環(huán)的阻塞。是我的理解錯了?

回答
編輯回答
心癌

首先 onScroll 不是 scroll 的默認行為,比如,點擊 a 標簽會跳轉這才是默認行為,如果對 a 標簽使用 preventDefault 或 .prevent,此時才會阻止 a 跳轉。
所以你在 onScroll 寫循環(huán)是會阻塞滾動行為的。
我的理解是指在 a 標簽上加 .passive 后就肯定會跳轉,就算加了 event.preventDefault 或 .prevent 也會不起作用的。

2017年8月24日 16:20