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);

})();

 

思路大概就是这样，具体代码和使用方法可以参考我的另一篇关于全屏滚动的文章。搭配着看，效果更好。