隨手記 - 瘋狂觸發滾輪事件的Mac觸控板

RobinTang 發布于2019-08-20 14:22 / 928人閱讀

摘要：這個來的莫名其妙，問了一圈人也沒什么思路，后來自己上網搜，在一個頁面上找到一段關于的觸控板的手勢滑動會瘋狂觸發滾輪事件的記錄，但是輪到具體的解決方案就語焉不詳了。

頭幾天官網剛上線，就接到投訴說有問題。過去一看，我靠什么鬼？！Mac下用觸控板一滑到底，——首頁上用iscroll寫的翻頁效果直接全軍覆沒。

這個bug來的莫名其妙，問了一圈人也沒什么思路，后來自己上網搜，在一個頁面上找到一段關于Mac的觸控板的手勢滑動會瘋狂觸發滾輪事件的記錄，但是輪到具體的解決方案就語焉不詳了。沒轍，靠天沒用，還是靠自己吧~

這里先簡單介紹下。出問題的首頁用的是iscroll插件，用snap屬性做的整屏翻頁的效果，翻頁用鼠標滾輪驅動，這塊用的是MDN上的一個滾輪事件的兼容代碼，回調使用iscroll的接口完成向上/向下翻頁的效果。

回到這個問題上。一開始我想用事件防抖解決，于是用setTimeout()自己寫了個：觸發事件后先進入延時，延時后執行函數；如果在延時內仍有事件觸發，則取消原有的延時重新計時。

// 打底用的zepto.js，addWheelListener是滾輪事件的兼容插件，下同~
var wheelTimer = false;
var wheelSlide = function (e) {
    e.preventDefault();
    clearTimeout(timer);
    if (e.deltaY > 0) {
        wheelTimer = setTimeout(function(){
            iScroll.next();
        }, 100);
    } else if (e.deltaY < 0 && iScroll.currentPage.pageY != 0) {
        wheelTimer = setTimeout(function(){
            iScroll.prev();
        }, 100);
    }
}
addWheelListener($("body")[0], wheelSlide);

我本意是用延時抵消掉重復觸發的滾輪事件，最后合成一個事件觸發，沒想到測試之后，Mac上的問題并沒有解決。

于是我想，用事件防抖的思路處理應該還是不對，即便是延遲時間較短，如果事件持續觸發的話肯定翻頁還是會被無限的延遲阻塞掉，至此我想換用事件節流再試試。在找資料的時候，意外發現了Underscore.js這個工具庫，里邊不僅有現成的節流和防抖（中文文檔里用的是“防反跳”）函數可以用，而且還支持鏈式調用，并且壓縮版本也才十幾k，正合我意。

說干就干，馬上用Underscore擼了個事件節流版的：

var wheelSlide = _(function (e) {
    e.preventDefault();
    if (e.deltaY > 0) {
        iScroll.next();
    } else if (e.deltaY < 0 && iScroll.currentPage.pageY != 0) {
        iScroll.prev();
    }
}).throttle(400);//這里毫秒數用了400，大概相當于一個短動畫的執行時間
addWheelListener($("body")[0], wheelSlide);

鏈式寫法看上去還挺不錯的！進本機瀏覽器（PC）……嗯？為啥最后會跳一下？趕緊翻文檔，又加了個參數上去：

var wheelSlide = _(function (e) {
    e.preventDefault();
    if (e.deltaY > 0) {
        iScroll.next();
    } else if (e.deltaY < 0 && iScroll.currentPage.pageY != 0) {
        iScroll.prev();
    }
}).throttle(400, {trailing: false});
addWheelListener($("body")[0], wheelSlide);

這回PC上倒是正常了，Mac也從一滑到底變成了有“段落感”的跳動，但結果還是不對……
一狠心把毫秒數改成了5000，結果呢：還、是、不、對、、、。。。
（//陷入循環懵逼狀態ing……）
痛定思痛，一定是文檔看的不夠多！于是又啃了一遍Underscore.js的文檔（雖然是翻譯的，囧……），發現防抖居然有個[immediate]參數，是可以優先執行的！大喜過望~接著擼：

var wheelSlide = _(function (e) {
    e.preventDefault();
    if (e.deltaY > 0) {
        wScroll.next();
    } else if (e.deltaY < 0 && wScroll.currentPage.pageY != 0) {
        wScroll.prev();
    }
}).debounce(600, true);// 本來想改回400的，有點心虛所以又加了200……
addWheelListener($("body")[0], wheelSlide);

居然PC和Mac都能一頁頁的翻頁了有！沒！有！不過翻頁的動作還有點遲滯，于是果斷把毫秒數改小：400、200、100，……Bingo！

最終代碼：

var wheelSlide = _(function (e) {
    e.preventDefault();
    if (e.deltaY > 0) {
        wScroll.next();
    } else if (e.deltaY < 0 && wScroll.currentPage.pageY != 0) {
        wScroll.prev();
    }
}).debounce(50, true);
addWheelListener($("body")[0], wheelSlide);

總結：

Mac觸控板bug踩坑 +1；

理解了事件節流和事件防抖的概念；

Underscore.js真好用；

感謝git把每次的修改都記了下來。

GPU云服務器云服務器觸控板滾輪事件鼠標滾輪事件 js 滾輪向上事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81573.html

WebVR開發教程——交互事件（二）使用Gamepad API

摘要：返回的位置矩陣返回的方向矩陣返回軸每秒的角加速度返回軸每秒的角速度返回軸每秒的線性加速度返回軸的線性速度與只有的如和的只包含方向矩陣，因此為而為而的如和由于和兼具，因此和都為。 showImg(https://segmentfault.com/img/remote/1460000011814572?w=680&h=383);上期 WebVR開發教程——交互事件（一）頭顯與手柄從頭顯和...

pubdreamcc 2019-08-21 17:22 評論0 收藏0
[譯]通過實例講解Debouncing和Throtting(防抖與節流)

摘要：譯通過實例講解和防抖與節流源碼中推薦的文章，為了學習英語，翻譯了一下原文鏈接作者本文來自一位倫敦前端工程師的技術投稿。首次或立即你可能發現防抖事件在等待觸發事件執行，直到事件都結束后它才執行。 [譯]通過實例講解Debouncing和Throtting(防抖與節流) lodash源碼中推薦的文章，為了學習（英語），翻譯了一下~ 原文鏈接作者：DAVID CORBACHO 本文來自一位...

Jenny_Tong 2019-08-23 13:42 評論0 收藏0
【譯】通過例子解釋 Debounce 和 Throttle

摘要：舉例舉例通過拖拽瀏覽器窗口，可以觸發很多次事件。不支持，所以不能在服務端用于文件系統事件?？偨Y將一系列迅速觸發的事件例如敲擊鍵盤合并成一個單獨的事件。確保一個持續的操作流以每毫秒執行一次的速度執行。 Debounce 和 Throttle 是兩個很相似但是又不同的技術，都可以控制一個函數在一段時間內執行的次數。當我們在操作 DOM 事件的時候，為函數添加 debounce 或者 th...

LeoHsiun 2019-08-23 11:34 評論0 收藏0
把鼠標、觸摸屏、觸控筆統一起來，Pointer Events介紹

摘要：把事件統一起來處理用戶的輸入要用到事件。就這樣，提取了鼠標觸摸屏觸控筆的共通之處，以方便開發跨設備的應用。雖然是一個抽象，但它包含了鼠標觸摸屏觸控筆的全部內容。手指與觸摸屏的屏幕接觸著，認定為。跨設備的問題平時我們在電腦上訪問的網頁，大部分情況下是用鼠標來控制的。比如說鏈接跳轉，就是鼠標指針移動到鏈接文字或圖片的位置，然后點擊一下。又比如說滾動屏幕，滑動一下鼠標滾輪就可以。如果是...

FleyX 2019-08-19 17:09 評論0 收藏0
把鼠標、觸摸屏、觸控筆統一起來，Pointer Events介紹

摘要：把事件統一起來處理用戶的輸入要用到事件。就這樣，提取了鼠標觸摸屏觸控筆的共通之處，以方便開發跨設備的應用。雖然是一個抽象，但它包含了鼠標觸摸屏觸控筆的全部內容。手指與觸摸屏的屏幕接觸著，認定為。跨設備的問題平時我們在電腦上訪問的網頁，大部分情況下是用鼠標來控制的。比如說鏈接跳轉，就是鼠標指針移動到鏈接文字或圖片的位置，然后點擊一下。又比如說滾動屏幕，滑動一下鼠標滾輪就可以。如果是...

elarity 2019-08-28 18:25 評論0 收藏0