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);
})();
思路大概就是这样,具体代码和使用方法可以参考我的另一篇关于全屏滚动的文章。搭配着看,效果更好。
上一篇: C# Winform 分页控件 UserControl
下一篇: Oracle 子表外键需不需要索引