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

但是多次触发click事件。无论滚动速度如何，请帮助我仅触发一次点击事件。

提前致谢

Answer 1

那是因为滚动事件是连续触发的。因此，如果您滚动鼠标滚轮然后停止，则不等于一个事件。尝试在你的鼠标轮处理程序中放一个console.log("mouse scrolled")，你会很快看到我的意思。

你需要以某种方式妥协才能完成你正在尝试的事情。我建议在处理程序中使用setTimeout并在超时持续时间后触发click事件（在setTimeout回调中）。如果第二个滚动事件在第一个到期之前进入，则取消第一个并重新启动它。这相当于用户滚动，然后停止滚动...然后触发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);
}

干杯

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'

防止滚动时出现多次单击事件触发

2 个答案: