如何在jQuery中只触发一次MouseWheel事件？

因此，每次用户通过鼠标滚轮向上或向下滚动时，我只想触发一次function。 请参阅： jsFiddle演示 。 问题是即使我有e.preventDefault（），该函数仍然会多次触发。

目标是每当用户向上或向下滚动时，该function仅触发一次。 与此网站类似。

这是我到目前为止的代码：

var sq = {}; sq = document; if (sq.addEventListener) { sq.addEventListener("mousewheel", MouseWheelHandler(), false); sq.addEventListener("DOMMouseScroll", MouseWheelHandler(), false); } else { sq.attachEvent("onmousewheel", MouseWheelHandler()); } function MouseWheelHandler() { return function (e) { var e = window.event || e; var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); if (delta < 0) { /* Scroll Down */ e.preventDefault(); console.log("Down. I want this to happen only once"); } else { /* Scroll Up */ console.log("up. I want this to happen only once"); e.preventDefault(); } return false; } return false; } 

Answer 1

这对我有所帮助：

 var isMoving=false; $(document).bind("mousewheel DOMMouseScroll MozMousePixelScroll", function(event, delta) { event.preventDefault(); if (isMoving) return; navigateTo(); }); function navigateTo(){ isMoving = true; setTimeout(function() { isMoving=false; },2000); } 

基本上你有一个isMoving变量，根据你的动画或你做的事情是否正在进行设置。 即使用户在一次“轻弹”中使用鼠标滚轮多次滚动，该function也只会触发一次。

Answer 2

  ​$(document).ready(function(){ var up=false; var down=false; $('#foo').bind('mousewheel', function(e){ if(e.originalEvent.wheelDelta /120 > 0 && up=false) { up=true; down=false; $(this).text('scrolling up !'); } elseif(e.originalEvent.wheelDelta /120 > 0 && down=false){ down=true; up=false; $(this).text('scrolling down !'); } }); }); 

这是一个插件，你可以使用它