事件監聽器在頁面加載時自行觸發

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.jsLoadingCta.addEventListener('click', function() {
    this.removeLoadingContent(this.tlRemoveLoading)
})

Answer 2

當使用這樣的括號時， 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})

}