防止滚动时多次触发点击事件

Question

我正在尝试在滚动时触发点击事件。就像在向上滚动时左侧导航栏被选中，向下滚动时右侧导航栏被选中。我试图通过以下方式实现：

$('#elem').bind('mousewheel', function(e){
     if(e.delta < 0) {
         //scroll left
         $(".left-nav").trigger("click");
     }else {
         //scroll right
         $(".left-nav").trigger("click");
     }
     return false;
 }); 

但是点击事件被触发多次。请帮助我使点击事件在滚动速度不论快慢时只触发一次。

提前感谢您。

- Baraneedharan

---

你能创建一个 jsfiddle.net 吗？你只想触发一次点击吗？还是在一定时间内只想触发一次？ - wirey00

你的 if 和 else 语句做了相同的事情。这是预期的吗？ - Ricardo Alvaro Lohmann

不好意思，那是个打字错误。应该是左导航和右导航。我只想触发一次。 - Baraneedharan

Answer 1

那是因为滚动事件会不断触发。所以如果你滚动鼠标轮然后停止，这并不等于一个事件。尝试在你的鼠标滚轮处理程序中放置console.log("mouse scrolled")，你很快就会明白我的意思。

你需要在某种程度上做出妥协才能实现你想要的目标。我建议在你的处理程序中使用setTimeout，并在超时时间（在setTimeout回调中）后触发click事件。如果第二个滚动事件在第一个过期之前到来，则取消第一个并重新启动它。这相当于用户滚动，然后停止滚动...然后你触发click。

-- 编辑 --

这里有一种相反的方法-在捕获到第一个鼠标滚轮事件时触发点击，然后忽略其余事件，直到用户停止滚动至少n毫秒，比如500毫秒。可能看起来大致如下（意思是“未经测试”）...

var scrolled = false,
    scrollTimeout;

$('#elem').bind('mousewheel', function(e){
    // absorb scroll
    e.preventDefault();

    // Scrolled yet?
    if(!scrolled){
        // Note they've scrolled
        scrolled = true;
        // Click appropriate nav
        $(e.delta < 0 ? '.left-nav' : '.right-nav').trigger("click");
    }

    // Reset the timer
    clearTimeout(scrollTimeout);

    // If the user stops scrolling for 500 millis, they can trigger click w/ next scroll
    scrollTimeout = setTimeout(function(){
        scrolled = false;
    }, 500);
}

祝你好运

- Madbreaks

---

嘿，Madbreaks。它不起作用，它只触发一次点击事件。 ;( - Baraneedharan

我更新了我的回答。试一下看看。如果不行，创建一个jsfiddle，我会看一下的。你用的是什么浏览器？ - Madbreaks

Answer 2

试试这个：

var busy = false;
$('#elem').bind('mousewheel', function(e){
    if (!busy) {
        busy = true;
        if(e.delta < 0) {
           //scroll left
           $(".left-nav").trigger("click");
        } else {
           //scroll right
           $(".left-nav").trigger("click");
        }
    }
 return false;
 }); 

当您的点击函数完成时，请将“busy”设置为“false”。

- fliim

---

这将在单击后永久禁用导航功能。怀疑这不是操作者想要的。 - Madbreaks