使用循環刪除事件偵聽器僅刪除最后一個元素的偵聽器

Question

我在 HTML 集合中有 3 個元素，並使用 forEach 循環將 onclick 偵聽器附加到它們

[].forEach.call(signBoxes, (e, i) => {
  e.addEventListener("click", callSetSign = () => setSign(signs[i]));
});

function setSign({ name, src }) {
  const sign = name;
  const Img = src;
  player1Choice.src = Img;
  [].forEach.call(signBoxes, (e, i) => {
    e.removeEventListener("click", callSetSign);
  });
  socket.emit("self-choose-sign", sign);
}

添加偵聽器可以正常工作，但是當我嘗試以相同方式刪除它們時，只會刪除最后一個元素的偵聽器。 如果我像這樣更改 function，我會得到相同的結果。

function setSign({ name, src }) {
  const sign = name;
  const Img = src;
  player1Choice.src = Img;
  signBoxes[0].removeEventListener('click', callSetSign)
  signBoxes[1].removeEventListener('click', callSetSign)
  signBoxes[2].removeEventListener('click', callSetSign) // only this one works
  socket.emit("self-choose-sign", sign);
}

有人可以解釋一下嗎？

Answer 1

您可以使用元素的dataset object 將string類型的參數傳遞給事件處理程序。

顯然試圖在 function object 上放置參數會簡單地覆蓋同名的屬性，並且.bind方法不會返回 function 它被調用。 嘗試在閉包中傳遞參數或通過調用bind將導致多個處理程序 function 對象。

dataset方法的未經測試的示例：

[].forEach.call(signBoxes, (e, i) => {
  e.dataset.index = i;  // store index on element
  e.addEventListener("click", setSign);
});

function setSign() {
  const { name, src } = signs[this.dataset.index];; // lookup using index
  const sign = name;
  const Img = src;
  player1Choice.src = Img;
  [].forEach.call(signBoxes, (e, i) => {
    e.removeEventListener("click", setSign);
  });
  socket.emit("self-choose-sign", sign);
}