未定义点击事件的HTML按钮为何与另一按钮触发相同函数？

我来帮你拆解这个问题——这种情况大概率是循环操作DOM元素时的意外赋值或者动态集合特性导致的，结合你给出的代码片段，我整理了几个最可能的原因：

1. 循环中错误地给所有类为rule的元素绑定了点击事件 #

你代码里用了document.getElementsByClassName("rule")获取元素集合，然后在for循环里处理这些元素。如果你的循环逻辑里，不小心把同一个onclick函数赋值给了所有rule类下的按钮（哪怕你只打算给其中一个设置），就会出现这个问题。

比如如果你的代码是类似这样的：

saveRuleSelections: function() { 
  let blackjackRules = []; 
  let rules = document.getElementsByClassName("rule"); 
  for (let i = 0; i < rules.length; i++) { 
    blackjackRules.push(rules[i].value);
    // 错误：给所有rule元素里的按钮都加了同一个onclick
    rules[i].querySelector('button').onclick = function() { /* 你的点击逻辑 */ };
  }
}

哪怕你原本只想给某一个按钮绑定，循环会遍历所有rule元素，把事件一个个加上去，导致所有按钮都有相同的onclick属性。

2. getElementsByClassName返回的是动态HTMLCollection #

这个API返回的集合是动态的——也就是说，当DOM变化时，它会自动更新。如果你在循环过程中修改了DOM（比如添加/删除元素），可能会导致集合的长度变化，循环意外地处理了额外的元素，包括你没打算修改的按钮。

解决办法是把动态集合转换成静态数组，避免DOM变化影响循环：

// 转换成静态数组
let rules = Array.from(document.getElementsByClassName("rule"));
// 或者用扩展运算符
let rules = [...document.getElementsByClassName("rule")];

3. 按钮元素被意外克隆 #

如果你的页面中有通过JS克隆按钮元素的逻辑，克隆的时候会把原元素的onclick属性也复制过去。比如用了cloneNode(true)（深度克隆），会连元素的事件属性一起克隆，导致新按钮也有相同的点击事件。

如果是这种情况，克隆后可以手动移除新按钮的onclick属性：

const clonedBtn = originalBtn.cloneNode(true);
clonedBtn.onclick = null; // 清空克隆来的点击事件

4. 事件委托的误触发 #

如果你的代码用了事件委托（比如给父元素绑定事件，通过冒泡触发），可能会让你误以为是按钮本身有onclick属性，但实际上是父元素的事件处理逻辑导致的。这种情况下，按钮本身并没有onclick属性，只是点击时会触发父元素的事件。你可以通过检查按钮的onclick属性是否为null来区分。

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