javascript - js中多個事件同時發生，如何阻止其中一個事件？

Question

我要實現的就是當滾動軸滾動到指定區域的時候，小序號變成指定的顏色，同時頁面滾動到小序號對應的區域，同時點擊對應的小序號的時候，也可以滾動到指定區域，同時小序號變成指定的顏色，問題就出現了，僅僅滾動的時候，是沒問題，但是當點擊對應的序號，跳到指定區域的時候，click事件與scroll事件是同時發生的，因為點擊要跳到指定位置，同時也會觸發捲動事件，這時候小序號的顏色會出現多次渲染
html:
<p class="submenu" id="submenu">

<p class="cirle one" scrollto="#one">1</p>
<p class="line" ></p>
<p class="cirle two" scrollto="#two">2</p>
<p class="line"></p>
<p class="cirle three" scrollto="#three">3</p>
<p class="line"></p>
<p class="cirle four" scrollto="#four">4</p>
<p class="line"></p>
<p class="cirle five" scrollto="#five">5</p>
<p class="line"></p>
<p class="cirle six" scrollto="#six">6</p>

</p>

js:
var circle=$(".cirle")
$(window).on('scroll',function(){

 
var st=$(this).scrollTop();

$.each(circle,function(){
if(st>=$($(this).attr("scrollto")).offset().top){

$(this).addClass("active").siblings().removeClass("active");

}

})

});

circle.click(function() {
   
     $('body,html').animate({
        scrollTop: $($(this).attr('scrollto')).offset().top
    }, 500);
    $(this).addClass("active").siblings().removeClass("active");

}) 
       截图如下
       

#我要問的問題是：當頁面停留在1序號的時候，我點擊2序號的時候，他會將1序號的背景顏色變色後，才將2的背景顏色變色，產生的視覺效果特別不好，就是先將前面序號渲染後，再跳到指定的序號，有一個彈跳的過程，產生這個現象的原因是因為if(st>=$($(this).attr("scrollto")) .offset().top)這個條件，因為點擊2序號的時候，一定會滿足1序號的條件，當點擊3的時候，頁面的scrolltop肯定也會滿足1與2，怎樣才可以讓這種現象不出現啊？

Answer 1

將發生滾動事件時要觸發的函數封裝出來，一開始先綁定這個函數，當點擊時取消綁定，當點擊運動完成後在回調函數中再重新給滾動事件綁定這個函數。

// 一开始绑定滚动函数
$(window).on('scroll',scrollFn);

circle.click(function() {
       // click时取消绑定  
       $(window).off('scroll',scrollFn);
       $('body,html').animate(
            {
                scrollTop: $($(this).attr('scrollto')).offset().top
            }, 
            500,
            function(){ // 运动完成后重新绑定
                $(window).on('scroll',scrollFn);
            }                
        );
}

Answer 2

我沒細看題目，提供一種思路不知是否可行。在事件中加入一個flag参数判断。比如当检测到当前click事件正在执行，那么clickLock=true，此时在scroll事件中增加一个检测，如果clickLock==true的时候就return不执行scroll函数的逻辑。这样就能在执行click事件同时不执行scroll事件。scroll也能單獨的正常執行。反覆的綁定然後解綁一個事件這種思路雖然也能解決問題，但是在性能上不太好。