прослушиватель событий запускается самостоятельно при загрузке страницы

Question

Слушатель событий срабатывает сам по себе при загрузке страницы, но хочет, чтобы он срабатывал только нажатием кнопки.Как решить эту проблему? Вот код:

class IntroAnimations{
    constructor() {

        //global variables
        this.jsLoadingCta    = document.querySelector('#js-loading-cta');
        this.tlRemoveLoading = new TimelineMax();

        //event listeners: ISSUE HERE
        this.jsLoadingCta.addEventListener('click', this.removeLoadingContent(this.tlRemoveLoading));

        //method calls:
        this.loadAnimations(this.jsLoadingCta);

    };

    removeLoadingContent(tl){

        let jsLoadOverlay = document.querySelector('#js-overlay-load');

        tl
        .to(jsLoadOverlay, 1, {width: '100%', ease: Power4.easeInOut})
        .set(jsLoadOverlay, {left: 'auto', right: 0})
        .to(jsLoadOverlay, 1, {width: '0%', ease: Power4.easeInOut})

    }

    loadAnimations(loadingCta){

        //variables
        let jsloadingCompanyintrotextset1 = document.querySelector('#js-loading-company-intro-text-set-1'),
            jsloadingCompanyintrotextset2 = document.querySelector('#js-loading-company-intro-text-set-2'),
            jsloadingCompanyintrotextset3 = document.querySelector('#js-loading-company-intro-text-set-3'),
            tlIntro                       = new TimelineMax();


        //instaniation of SplitText
        let companyIntro1 = new SplitText().configureDomElement(jsloadingCompanyintrotextset1),
            companyIntro2 = new SplitText().configureDomElement(jsloadingCompanyintrotextset2),
            companyIntro3 = new SplitText().configureDomElement(jsloadingCompanyintrotextset3);


        //GSAP Animations
        tlIntro
        .set([companyIntro1, companyIntro2, companyIntro3], {x: 20, opacity: 0})
        .staggerTo(companyIntro1, 1, {x: 0, opacity: 1, ease: Power4.easeOut}, .02)
        .staggerTo(companyIntro2, 1, {x: 0, opacity: 1, ease: Power4.easeOut}, .02, '-=.95')
        .staggerTo(companyIntro3, 1, {x: 0, opacity: 1, ease: Power4.easeOut}, .02, '-=.9')
        .to(loadingCta, 1, {x: 0, opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, '-=.9')

    };
};

Спасибо.Почему это происходит?Это должно быть связано?

Answer 1

Когда вы используете такие круглые скобки, this.removeLoadingContent(this.tlRemoveLoading), он будет срабатывать при нагрузке.

Вам нужно, чтобы оно было, например, this.removeLoadingContent

---

Поскольку все, что вы делаете с this.tlRemoveLoading это передать new TimelineMax(), вместо этого попробуйте сделать что-то вроде этого

    //event listeners: ISSUE HERE
    this.jsLoadingCta.addEventListener('click', this.removeLoadingContent);

removeLoadingContent(){

    let jsLoadOverlay = document.querySelector('#js-overlay-load');
    let tl = new TimelineMax();

    tl
    .to(jsLoadOverlay, 1, {width: '100%', ease: Power4.easeInOut})
    .set(jsLoadOverlay, {left: 'auto', right: 0})
    .to(jsLoadOverlay, 1, {width: '0%', ease: Power4.easeInOut})

}

Answer 2

Я верю, потому что это называется там.Попробуйте изменить его на

this.jsLoadingCta.addEventListener('click', function() {
    this.removeLoadingContent(this.tlRemoveLoading)
})