Javascript addeventlistener 多次点击答案

【问题标题】：Javascript addeventlistener hitting click multiple timesJavascript addeventlistener 多次点击
【发布时间】：2021-03-11 11:22:09
【问题描述】：

下面提到的代码将在数据列表（图标列表）中将图标从已观看（-）更改为未观看（+），反之亦然：-

ts 代码：-

const watchListComponent = document.querySelectorAll('.addtoWatchlist');
        if (watchListComponent.length) {
            watchListComponent.forEach((watchItem) => {
                watchItem.addEventListener('click', () => {
                    console.log('here');
                    watchItem.querySelector('.icon').classList.toggle('iconWatched');
                    watchItem.querySelector('.icon').classList.toggle('iconWatchList');
                });
            });
        }

HTML 代码：-

<div class="px-2">
                          <a href="javascript:void(0)" class="tableInvisibleOption addtoWatchlist tooltipTRWL">
                            <i class="icon icon20 iconWatchList iconShow" (click)="addToWatchList(fundData)"></i>
                            <span class="tooltiptextTRWL">Add to Watchlist</span></a>
                        </div>

在上述情况下，如果我第一次点击未观看（+）图标，它会变为已观看（-），例如：-（+）到（-），下一次如果我点击它应该从 (-) 更改为 (+) 但图标未更改。如果我单击两次，图标将从（-）变为（+），然后如果我单击两次，则从（+）变为（-）。

需要在单击时将图标从 (+) 更改为 (-) 和 (-) 更改为 (+)。

【问题讨论】：

请附上一个证明问题的sn-p（编辑并点击[<>]）。孤立的代码是不够的。您的代码呈现带有隐含的类/元素，工作正常：jsfiddle.net/n5Lujv84
我认为缺少一些上下文。您可以将 HTML 添加到您的示例中吗？
@StefanoNepa 我已经添加了 html 代码。
(click)="addToWatchList(fundData)" 是做什么的？如果您删除它并坚持单击处理程序模式怎么办？
@freedomn-m 单击时，图标正在更改，“fundData”具有“ID”，它将将所选记录添加到表中。基本上，我应该从一组记录中添加单击的记录，并将所选记录的图标从（+）更改为（-）。向表中添加记录就完成了。

标签： javascript

【解决方案1】：

使用event delegation。给你一个minimal reproducable example

document.addEventListener("click", toggleAddIcon);

function toggleAddIcon(evt) {
  const origin = evt.target;
  if (origin.classList.contains("icon")) {
    origin.classList.toggle('iconWatchList');
  }
}

.icon {
  cursor: pointer;
}

.icon.iconWatchList:after {
  content: ' (on list)';
}

<div class="icon">click</div>
<div class="icon">click</div>
<div class="icon">click</div>

【讨论】：

@Kooilnc 我在一个问题中添加了Html，您可以检查一下吗？
document.AddEventtListener("click", toggleAddIcon);我不能使用它，因为我在表单中有其他带有不同图标的点击事件，如果我点击，其他图标会受到影响。