如何只点击一次html元素？答案

【问题标题】：How to click on html element only once?如何只点击一次html元素？
【发布时间】：2019-10-15 15:02:09
【问题描述】：

我有一个元素列表，当我单击元素时，我想将 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>

    let numArr = [];
    let elements = [...document.querySelectorAll('span')];

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

我希望 [2, 5, 7, 10, 3] 的输出任何被按下的项目的值在数组中没有重复！

【问题讨论】：

只需在处理程序中移除监听器

标签： javascript events dom-events

【解决方案1】：

在添加新项目之前检查元素文本是否已经在array中在下面的代码中，我使用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);
             }
        })

【讨论】：

@Amessihel 完成！ :)