Javascript 如何只单击一次html元素？

我有一个元素列表，当我单击该元素时，我想将textNode添加到数组中，只需单击该元素一次。我不需要数组中的重复值。当数组中有5个元素时，我想停止按下

我试过的没用

  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>10</span>
  </div>

---

我期望

[2,5,7,10,3]

任何按下项的值的输出在数组中没有重复

在添加新项之前，只需检查元素文本是否已在

数组中
在下面的代码中，我使用了
indexOf
：

    elements.forEach((item) => {
          item.addEventListener('click', (e) => {
             item.classList.add('green');
             let text = item.textContent;
             if(numArr.indexOf(text) == -1){
                numArr.push(item.textContent);
             }
             if(numArr.length === 5) {
                item.setAttribute('disabled', true);
             } else {
                item.setAttribute('disabled', true);
             }
        })

只需删除handler@Amessihel完成！：）
    elements.forEach((item) => {
          item.addEventListener('click', (e) => {
             item.classList.add('green');
             let text = item.textContent;
             if(numArr.indexOf(text) == -1){
                numArr.push(item.textContent);
             }
             if(numArr.length === 5) {
                item.setAttribute('disabled', true);
             } else {
                item.setAttribute('disabled', true);
             }
        })