Question

这是一个地图应用程序，您基本上可以在点击地图后记录一个事件。我面临的问题是当我点击 formSubmit 按钮时，它会多次触发 addEventlistner（相对于它被点击的次数）。

例如：如果我第一次单击 formSubmit 按钮，附加到它的 addEventlistener 将调用该函数一次。然后当我第二次点击 formSubmit 时，addEventlistener 将触发 2 次。然后当我第三次点击它时，eventlistener 将触发三次。

const _loadMap = (pos) => {
    let { latitude: lat, longitude: lng } = pos.coords;
    let coords = [lat, lng];

    map = L.map("map").setView(coords, 13);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);

    //click on map
    map.on("click", () => {
      _showForm();
    });
  };
  const _showForm = () => {
    
    form.style.display = "flex";
    formSubmit.addEventListener("click", () => {
      //console.log("add fields");
      _addField();
    });
  };

  const _addField = () => {
    if (!formHeading.value || !formDescription.value) {
      alert("empty fields");
    }

    if (formHeading.value && formDescription.value) {
      //created comp div
      const comp = document.createElement("div");
      comp.classList.add("card__comp--div");
      //created comp info div
      const compInfo = document.createElement("div");
      compInfo.classList.add("comp__info");
      comp.appendChild(compInfo);
      //created comp title
      const compTitle = document.createElement("h1");
      compTitle.classList.add("comp__info--tilte");
      compTitle.innerText = formHeading.value;
      compInfo.appendChild(compTitle);

      //created comp description
      const compDescription = document.createElement("p");
      compDescription.innerText = formDescription.value;
      compDescription.classList.add("comp__info--description");
      compInfo.appendChild(compDescription);

      //created submit button
      const clearBtn = document.createElement("button");
      clearBtn.classList.add("comp--clear");
      clearBtn.innerText = "clear";
      comp.appendChild(clearBtn);

      //Append comp to comp container
      compContainer.appendChild(comp);

      //hide form
      _hideForm();
    }
  };

  const _hideForm = () => {
    // console.log("hide");
    form.style.display = "none";
    formHeading.value = "";
    formDescription.value = "";
  };

Answer 1

问题是每次点击地图并调用 _showForm() 时，您都会向 formSubmit 添加一个新侦听器。

只需在 _showForm() 之外创建一次 formSubmit 侦听器

formSubmit.addEventListener('click', () => {  
  _addField();
});

const _showForm = () => {
  form.style.display = 'flex';
};

添加事件侦听器多次触发

1 个答案: