Question

我有这个非常简单的点击事件，触发滚动到已点击的ID，您可以在下面看到：

$('.navigation-panel a').on('click', function () {
    var id = $(this).attr('href');
    $('html, body').animate({ scrollTop: $(id).offset().top - 100 }, 1000);
});

当它被触发时，它还会触发我在此处可以看到的其他滚动事件：

    $(window).scroll(function () {
        var y = $(this).scrollTop();

        menu.each(function (event) {
            if (y >= $($(this).attr('href')).offset().top - 100) {
                menu.not(this).removeClass('active');
                $(this).addClass('active');
            }
        });

    });

我想回答的问题是，如果点击事件已经发生，如何防止第二个脚本被执行？但是，我需要在click事件完成后触发第二个脚本。

脚本必须是独立的，因为第二个脚本对于用户刚刚滚动而不是单击以导航到页面的不同部分非常重要。

Answer 1

单击时不触发事件处理程序的一种可靠方法是暂时删除事件处理程序，然后在动画结束时再次附加事件处理程序并触发它。

$(window).on('scroll', scroller);

function scroller() {
    var y = $(this).scrollTop();

    menu.each(function(event) {
        if (y >= $($(this).attr('href')).offset().top - 100) {
            menu.not(this).removeClass('active');
            $(this).addClass('active');
        }
    });
}

$('.navigation-panel a').on('click', function() {
    var id = $(this).attr('href');

    $(window).off('scroll', scroller);

    $('html, body').animate({
        scrollTop: $(id).offset().top - 100
    }, 1000, function() {
        $(window).on('scroll', scroller).trigger('scroll');
    });
});

Answer 2

@ adeneo的方式对于单个事件方法来说可能是正确的做法，但你也可以使用全局标志来做到这一点：

var dontScroll = false;

$('.navigation-panel a').on('click', function () {
    var id = $(this).attr('href');
    dontScroll = true;
    $('html, body').animate({ 
        scrollTop: $(id).offset().top - 100 
    }, {
        duration: 1000, 
        complete: function(){
           dontScroll = false;
        }
    });
});

$(window).scroll(function () {
    if(!dontScroll){
        var y = $(this).scrollTop();

        menu.each(function (event) {
            if (y >= $($(this).attr('href')).offset().top - 100) {
                menu.not(this).removeClass('active');
                $(this).addClass('active');
            }
        });
    }
});

如果触发了单击事件，则阻止调用代码

2 个答案: