3

我有两个事件:一个是onclick当我单击菜单时滚动到某个 div,另一个是onscroll当滚动靠近 div 时“突出显示”菜单项。

我的问题是:如何在另一个事件执行时“禁止”执行一个事件。

这是我的代码:

function goToByScroll(id){
  var value = $(id).offset().top;
  var scrl = value - 154;
  $('html,body').animate({
    scrollTop: scrl},
  'slow');  
} 

//scroll menu control
$("#menu-home ul li a").click(function(e) {
    e.preventDefault();
    $("#menu-home ul li a").removeClass('menu-home-active');
    $(this).addClass('menu-home-active');
    goToByScroll($(this).attr("href"));    
});

//scroll bar control
$(window).scroll(function() {
  var scrv = $(this).scrollTop();
  var allmenu = $("#menu-home ul li a");
  if(scrv == 0){
    allmenu.removeClass('menu-home-active');
    $('#menu-div1').addClass('menu-home-active');  
  }
  if(scrv > 458 && scrv < 478){
    allmenu.removeClass('menu-home-active');
    $('#menu-div2').addClass('menu-home-active');  
  }
  if(scrv > 989 && scrv < 1009){
    allmenu.removeClass('menu-home-active');
    $('#menu-div3').addClass('menu-home-active');  
  }
  if(scrv >= 1324){
    allmenu.removeClass('menu-home-active');
    $('#menu-div4').addClass('menu-home-active');  
  }
});

谢谢

4

2 回答 2

3

首先; 当滚动事件(或相反)时,单击事件不会触发。当您到达滚动事件时,点击事件已经完成。

您可能应该做的是在 click 事件上设置一个变量,如下所示:

function goToByScroll(id) {
    window.isAutoScrolling = true;
    var value = $(id).offset().top;
    var scrl = value - 154;
    $('html,body').animate({scrollTop: scrl}, 'slow', goToByScrollCompleted);
}
function goToByScrollCompleted() {
    window.isAutoScrolling = false;
}

然后你添加到滚动事件的开始:

if(window.isAutoScrolling) return;

另外,至于注册goToByScrollCompleted,这可能可以通过多种方式完成,但是,由于我不知道您如何进行滚动,所以我不能说。

于 2012-10-16T13:53:27.420 回答
1

您可以拥有全局布尔变量lock,检查它是否为假,如果是,请将其设置为真并执行您的函数。然后重置它。

于 2012-10-16T13:52:56.233 回答