每次单击都会增加 Firestore 更新值

Question

function rateProject(self) {

document.getElementsByClassName('modal')[5].style.display="block";

var docRef=self.getAttribute("id");

var downloadRef = db.collection("projects").doc(docRef);

    document.getElementById('rateOneStar').addEventListener('click',e=>{

        return downloadRef.update({

            oneStar: firebase.firestore.FieldValue.increment(1)

        })

        .then(function() {

            console.log("1 star given");

            document.getElementsByClassName('modal')[5].style.display="none";

        })

        .catch(function(error) {

            // The document probably doesn't exist.

            console.error("Error updating document: ", error);

        });

    })

}

这就是 oneStar 发生的事情：

（1 单击：1），（2 单击：3），（3 单击：6）

我想要的是：

（1 单击：1），（2 单击：2），（3 单击：3）。

如果我删除 eventListener 它可以工作。

Answer 1

我相信这addEventListener是堆积起来的，每次执行该函数时都会添加一个侦听器。如果您想通过单击 4 次来确认发生这种情况，结果应该是 10。一种可能的解决方案是每次从元素中清除事件侦听器rateOneStar。