Javascript 消除鼠标滚轮事件内部触发的事件的递归

我在做一个使用虚拟分页的项目。正文设置为

溢出：隐藏

，当前浏览页面的唯一方法是通过实际单击导航窗格中的链接，或单击向下滚动/向上滚动按钮。以下是物理单击这些元素时触发的事件：

var links = $('#topnav, .top-mid a'), l = links.length - 1;
var id = 0;

$('.scrollDown, .scrollUp, .top-mid a, body.home #topnav').click(function (e) {
    e.preventDefault();
    var $this = $(this);

    if ($this.is('.scrollDown') && id < l) id++;
    if ($this.is('.scrollUp') && id > 0) id--;
    if ($this.is('#topnav, .top-mid a')) id = links.index(this);

    // Body is animated down or up and elements are
    // shown or hidden depending on what was clicked and
    // and what the var id is currently equal to
});

var links=$（'#topnav，.top-mid a'），l=links.length-1；
var-id=0；
$（'.scrollDown、.scrollUp、.top mid a、body.home#topnav'）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；
if（$this.is（'.scrollDown'）&&id0）id--；
if（$this.is（'#topnav，.top mid a'））id=links.index（this）；
//身体向下或向上设置动画，元素
//显示或隐藏取决于单击的内容和
//变量id当前等于什么
});

其想法是在鼠标滚轮事件中只触发滚动按钮的一次点击。因此，一些类似于这样简单的事情，但实际上是可行的：

$(window).on('mousewheel', function(e){ // I realize this will not work in FF

    var evt = e.originalEvent.wheelDelta;
    console.log(evt);

    // Scrolling Down
    if (evt < 0) {
        $('.scrollDown').click(); // This fires recursively as long as wheelDelta !== 0
    }
});

$（window）.on（'mouseweell'，函数（e）{//我意识到这在FF中不起作用
var evt=e.originalEvent.wheelDelta；
控制台日志（evt）；
//向下滚动
如果（evt<0）{
$（'.scrollDown'）。单击（）；//只要wheelDelta！==0，就会递归激发
}
});

我如何强制wheelDelta只增加或减少1，或者，如果不增加或减少1，我如何消除单击事件的递归

---

我做这件事已经有一段时间了，读了很多帖子，都没能破解它。我也尝试过，但它相当沉重，并且由于其他各种原因不适合我的项目

我终于解决了这个问题，结果当然很简单。这是一个在

click（）

事件中切换布尔值的问题，但仅在所有动画发生之后。像这样：

var scrolled = false;

$(window).on('mousewheel', function(e){

    var evt = e.originalEvent.wheelDelta;

    // Scrolling Down - Only fire the click event if it hasn't already fired
    if (evt < 0 && !scrolled) {
        $('.scrollDown').click();
    // Scrolling Up
    } else if (evt > 0 && !scrolled) {
        $('.scrollUp').click();
    }
});

// Toggle the scrolled variable inside the original click event
$('.scrollDown, .scrollUp').click(function (e) {

    e.preventDefault();

    var $this = $(this);

    if ($this.is('.scrollDown') && id < l) { 
        id++; 
        scrolled = true; 
        setTimeout(function(){ 
            scrolled = false;
        }, 1500); 
    }
    if ($this.is('.scrollUp') && id > 0) { 
        id--; 
        scrolled = true; 
        setTimeout(function(){ 
            scrolled = false;
        }, 1500); 
    }
    // Other events here
    // The timeout has to be set high enough to assure
    // that the mousewheel event is finished
});

var scrolled=false；
$（窗口）.on（'mouseweell'，函数（e）{
var evt=e.originalEvent.wheelDelta；
//向下滚动-仅在尚未触发的情况下触发click事件
如果（evt<0&！滚动）{
$（'.scrollDown'）。单击（）；
//向上滚动
}else if（evt>0&！滚动）{
$（'.scrollUp'）。单击（）；
}
});
//在原始单击事件中切换滚动的变量
$（'.scrollDown、.scrollUp'）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；
如果（$this.is（'.scrollDown'）&&id0）{
id--；
滚动=真；
setTimeout（函数（）{
滚动=假；
}, 1500); 
}
//这里的其他活动
//必须将超时设置得足够高，以确保
//鼠标滚轮事件已完成
});

您通常会使用

$（窗口）

在处理程序中，通常使用一个小计时器或其他方法检查滚动距离，然后每次滚动页面时触发一个事件。通常滚动滚轮的一次轻弹是100px，我认为这是跨浏览器的。为什么不看看该插件的源代码看看它能做什么呢？

$（窗口）。on（'scroll'）

的问题是当单击滚动按钮时它会触发。我需要一个单独的事件来滚动窗口并实际单击按钮。该插件实际上并不滚动窗口，它只是侦听事件和方向，然后向上设置容器动画

-xpx

。我把它弄得乱七八糟，过了几天才放弃它，把它贴在这里。