3

我试图在滚动时触发点击事件。就像滚动顶部的左侧导航和向下滚动的右侧导航一样，我试图通过以下方式实现它

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

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

提前致谢

4

2 回答 2

0

尝试这个：

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

然后在您的点击功能完成后将“忙”设置为“假”

于 2012-08-16T18:47:47.987 回答
0

那是因为滚动事件是连续触发的。因此，如果您滚动鼠标滚轮然后停止，那不等于一个事件。尝试在您的鼠标滚轮处理程序中放置一个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);
}

干杯

于 2012-08-16T18:43:44.423 回答