Window scroll事件中click监听器重复触发问题如何解决

安全阿岳

2026-8-29

问题根因

scroll事件在页面滚动时会高频触发，你将click事件绑定逻辑放在scroll回调内，每次滚动都会给所有匹配[data-config-url]的元素重复叠加绑定相同的click监听器
单个元素上累计绑定了多个重复的click回调，点击时所有回调依次执行，就会出现多次打印configData的现象

推荐修复方案（事件委托）

无需将绑定逻辑放在scroll回调中，仅需全局绑定一次事件委托即可，不会出现重复绑定问题，还能自动覆盖后续动态加载的匹配元素，性能更好：

// 页面加载后执行一次即可
document.addEventListener('click', (e) => {
  const targetItem = e.target.closest('[data-config-url]');
  if (targetItem) {
    const configData = targetItem.getAttribute('data-config-url');
    console.log(configData);
  }
});

兼容原有逻辑的修复方案

如果需要保留在scroll中绑定事件的逻辑，可给已绑定事件的元素添加标记，避免重复绑定：

window.addEventListener("scroll", () => {
  // 只选中还未绑定过click事件的元素
  const config = document.querySelectorAll("[data-config-url]:not([data-click-bound])");
  config.forEach((item) => {
    // 标记为已绑定，后续滚动查询时会跳过该元素
    item.setAttribute('data-click-bound', 'true');
    item.addEventListener("click", (e) => {
      const configData = e.currentTarget.getAttribute("data-config-url");           
      console.log(configData);
    });
  });
});