JavaScript点击单个链接却触发所有链接绑定函数问题排查

问题原因 #

你的代码存在三个核心错误导致出现异常：

1. 事件绑定逻辑错误：a.onclick = filter(a.id)这类写法是将filter函数的执行结果赋值给onclick事件，而非将函数本身绑定给事件。filter函数会在页面加载执行到该行代码时直接运行，不会等到点击事件触发时执行。5个绑定语句会按顺序先后执行filter函数，最后一次执行传入的是id5，所以页面加载完成后默认就停在id5对应的筛选结果。
2. 全选逻辑参数错误：id为id1的链接id值是id1，你filter函数内判断tag === "view all"的条件永远无法触发，全选功能本身也无法正常运行。
3. 没有阻止a标签默认跳转行为：事件触发时a标签默认会跳转刷新页面，就算绑定逻辑正确的前提下，点击后筛选效果也不会保留。

修复方案 #

基础修复方案（保留原有写法调整绑定逻辑即可） #

window.onload = function() {
  var a = document.getElementById("id1");
  var b = document.getElementById("id2");
  var c = document.getElementById("id3");
  var d = document.getElementById("id4");
  var e = document.getElementById("id5");
  var x = document.getElementsByClassName("className")

  // 用匿名函数包裹，绑定函数引用，同时阻止默认跳转
  a.onclick = function(e) {
    e.preventDefault();
    filter("view all");
  }
  b.onclick = function(e) {
    e.preventDefault();
    filter(b.id);
  }
  c.onclick = function(e) {
    e.preventDefault();
    filter(c.id);
  }
  d.onclick = function(e) {
    e.preventDefault();
    filter(d.id);
  }
  e.onclick = function(e) {
    e.preventDefault();
    filter(e.id);
  }

  function filter(tag) {
    for (var i = 0; i < x.length; i++)
        if (tag === "view all") {
            x[i].style.display = "block";
        }   
        else {
             if (tag.toLowerCase() === x[i].getAttribute('alt').toLowerCase()) 
        x[i].style.display = "block";
      else
        x[i].style.display = "none";
        
        }
    return false;
  }
}

优化写法（批量绑定，无需逐个获取元素） #

window.onload = function() {
  const filterItems = document.getElementsByClassName("className");
  // 批量绑定所有对应a标签点击事件
  document.querySelectorAll('a[id^="id"]').forEach(aEl => {
    aEl.addEventListener('click', function(e) {
      // 阻止默认跳转
      e.preventDefault();
      // 处理全选参数
      const tag = this.id === 'id1' ? 'view all' : this.id;
      // 执行筛选逻辑
      for (let i = 0; i < filterItems.length; i++) {
        if (tag === "view all") {
          filterItems[i].style.display = "block";
        } else {
          filterItems[i].style.display = tag.toLowerCase() === filterItems[i].getAttribute('alt').toLowerCase() ? "block" : "none";
        }
      }
    })
  })
}

内容的提问来源于stack exchange，提问作者Anon