1. 程式人生 > >JQuery實現滑鼠滑動多次,只觸發一次響應事件

JQuery實現滑鼠滑動多次,只觸發一次響應事件

正常在設定滑鼠滾輪事件的時候,一次滾動對應一次響應事件。但是按照使用者習慣,使用者一次滑動滑鼠滾輪的動作中,可能實際上滑鼠滾輪滾動了多次(通俗的講,就是使用者不會一下一下的滑動滾輪)。這樣實際上觸發了多次滾輪響應事件,無法達到理想中,使用者滑動一次滾輪,只產生一個動作的效果,影響使用者體驗。

為了解決這一問題,可以設定一個響應事件的觸發條件

(1)設定一個boolean型的變數作為是否觸發滾輪響應事件的條件。初始值為true。

var doScroll = true;

(2)設定滑鼠監聽事件,當doScroll為true的時候,響應滑鼠滾輪事件。

(3)在響應滑鼠滾輪事件時,將doScroll設定成false,這樣可以保證,無論在這次響應過程中,又發生了多少滑鼠滾動事件,都不會再響應。

(4)當這次滑鼠滾輪響應事件結束後,將doScroll重新設定成true,以響應下一次滾輪事件。

(function(){
	var oDiv = document.getElementById('fullpage');

	function onMouseWheel(ev) {/*當滑鼠滾輪事件發生時,執行一些操作*/
		var ev = ev || window.event;
		var down = true; // 定義一個標誌,當滾輪向下滾時,執行一些操作
			down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
		if(doScroll){
			if(down){
			if(page_index!=6){
				doScroll = false;
				page_index++;
				$('#full-page').animate({top:-page_index*screen_height},speed,function() {
                doScroll = true;
            });
			}
			}else{
				if(page_index!=0){
					doScroll = false;
					page_index--;
					$('#full-page').animate({top:-page_index*screen_height},speed,function() {
                doScroll = true;
            });
				}
			}
			if(ev.preventDefault){/*FF 和 Chrome*/
				ev.preventDefault();// 阻止預設事件
			}
		}
		
		return false;
	}
	addEvent(oDiv,'mousewheel',onMouseWheel);
	addEvent(oDiv,'DOMMouseScroll',onMouseWheel);

})();

思路大概就是這樣,具體程式碼和使用方法可以參考我的另一篇關於全屏滾動的文章。搭配著看,效果更好。