javascript - js中多个事件同时发生,如何阻止其中一个事件?
问题描述
我要实现的就是当滚动轴滚动到指定区域的时候,小序号变成指定的颜色,同时页面滚动到小序号对应的区域,同时点击对应的小序号的时候,也可以滚动到指定区域,同时小序号变成指定的颜色,问题就出现了,仅仅滚动的时候,是没问题,但是当点击对应的序号,跳转到指定区域的时候,click事件与scroll事件是同时发生的,因为点击要跳转到指定位置,同时也会触发滚动事件,这时候小序号的颜色会出现多次渲染
html:
<div class="submenu" id="submenu">
<div class="cirle one" scrollto="#one">1</div>
<div class="line" ></div>
<div class="cirle two" scrollto="#two">2</div>
<div class="line"></div>
<div class="cirle three" scrollto="#three">3</div>
<div class="line"></div>
<div class="cirle four" scrollto="#four">4</div>
<div class="line"></div>
<div class="cirle five" scrollto="#five">5</div>
<div class="line"></div>
<div class="cirle six" scrollto="#six">6</div>
</div>
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,怎样才可以让这种现象不出现啊?
将发生滚动事件时要触发的函数封装出来,一开始先绑定这个函数,当点击时取消绑定,当点击运动完成后在回调函数中再重新给滚动事件绑定这个函数。
// 一开始绑定滚动函数
$(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);
}
);
}
这篇关于javascript - js中多个事件同时发生,如何阻止其中一个事件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!