3

2つのイベントがあります。1onclickつはメニューをクリックしたときに特定のdivにスクロールするイベントで、もう1つ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

の最初の; スクロールイベントが発生しているとき（またはその逆の場合）、クリックイベントは発生しません。スクロールイベントに到達すると、クリックイベントはすでに終了しています。

おそらく行うべきことは、次のようにクリックイベントに変数を設定することです。

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を使用できます。falseかどうかを確認し、falseの場合はtrueに設定して、関数を実行します。次に、リセットします。

于 2012-10-16T13:52:56.233 に答える