vue 鼠標停止事件

最近由於是大屏項目一直在使用vue遇到一個需求:就是長時間未操作鼠標就自動切換頁面展示。但是js中是沒有這個事件的,所以我們只能使用其他事件巧妙的轉化一下。我的鼠標停止事件就是利用一個mousemove實現的:

//初始化
                var _this = this;
                var diff = 3000,//未操作觸發間隔
                    firstTime = new Date().getTime(),
                    lastTime = new Date().getTime(),
                    indulge = false,//閥門
                    viewNub = 1;
                //啓動
                var switchTime = setInterval(anm, 5000);
                //停止
                $(document).on('mousemove', function () {
                    indulge = true;
                    clearInterval(switchTime);
                    firstTime = new Date().getTime();
                    console.log("moving");
                });
                //再啓動
                setInterval(function () {
                    lastTime = new Date().getTime();
                    if (lastTime - firstTime > diff && indulge) {
                        indulge = false;
                        viewNub = $(".mid-top-menu li.active").index();//如果中途操作鼠標保存選中的下標,下次變化從次開始
                        switchTime = setInterval(anm, 5000);
                    }
                }, 1000);

                //自動動作
                function anm() { 
                    console.log("切換頁面");
                }

思路是利用時間差來判斷是否超過設置閾值,超過則開始切換。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章