欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JQuery实现鼠标滑动多次,只触发一次响应事件

程序员文章站 2022-06-08 18:34:27
...

正常在设置鼠标滚轮事件的时候,一次滚动对应一次响应事件。但是按照用户习惯,用户一次滑动鼠标滚轮的动作中,可能实际上鼠标滚轮滚动了多次(通俗的讲,就是用户不会一下一下的滑动滚轮)。这样实际上触发了多次滚轮响应事件,无法达到理想中,用户滑动一次滚轮,只产生一个动作的效果,影响用户体验。

为了解决这一问题,可以设置一个响应事件的触发条件

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

})();

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

相关标签: JQuery 响应事件