为何change_name函数多次调用后变量值出现混乱？

咱们一步步来分析你遇到的change_name多次调用、变量值混乱的问题：

1. 重复绑定事件 → 多次触发change_name #

你通过onclick属性绑定了input_name，每次点击这个元素时，input_name都会完整执行一遍。而函数里的这两行代码：

$(this).click( function() { change_name(event, name); } );
$(name).keydown(function(event){ if(event.keyCode == 13){ change_name(event, name); } });

是在给元素重复添加事件监听器。举个例子：

• 第一次点击后，元素有1个click监听器；
• 第二次点击，又加1个，现在变成2个；
• 后续再点击或者按回车，所有绑定的监听器都会触发，change_name自然就被调用多次了。

2. localStorage的oldname被频繁覆盖 → 变量值混乱 #

在input_name里，每次执行都会执行：

window.localStorage.setItem("oldname", name.value);

这意味着不管你有没有修改输入框内容，只要点击元素，oldname就会被更新为当前输入框的最新值。而change_name读取的oldname是最后一次input_name执行时存入的值，不是你第一次点击时的原始值。比如：

• 第一次点击输入框，oldname存的是初始值"A"；
• 还没来得及修改或触发change_name，又点了一次输入框，oldname被更新成当前输入框的值（可能还是"A"，也可能你已经改成"B"了）；
• 这时候触发change_name，拿到的oldname已经是第二次存入的值，完全不是你预期的第一次点击时的原始值，就出现了变量混乱。

3. 闭包陷阱的额外影响 #

另外还要注意：每次绑定事件时，匿名函数会捕获当前的event和name变量引用。如果多次绑定，后续触发事件时，这些变量可能已经是后续执行input_name时的新引用，也会导致传递给change_name的参数混乱。

针对这两个核心问题，给你两个简单的修复方向：

方案一：避免重复绑定事件 #

把事件绑定逻辑移到初始化代码里，只绑定一次，而不是在input_name里重复绑定：

// 页面加载完成后，给目标输入框绑定一次事件即可
$(function() {
  // 假设你的输入框有特定的类名或ID，替换成实际选择器
  $(".name-input").on("click", function(event) {
    event.stopPropagation();
    // 这里可以处理input_name里的样式修改和初始值保存
    this.style.backgroundColor = "transparent";
    if (!window.localStorage.getItem("oldname")) {
      window.localStorage.setItem("oldname", this.value);
    }
    change_name(event, this);
  }).on("keydown", function(event) {
    if (event.keyCode === 13) {
      event.stopPropagation();
      change_name(event, this);
    }
  });
});

// 然后移除原来的onclick属性绑定，不用再调用input_name了

方案二：正确保存原始值 #

如果一定要保留input_name的调用逻辑，那要确保oldname只在第一次点击时保存，不要每次都覆盖：

function input_name(event, name) {
  event.stopPropagation();
  name.style.backgroundColor = "transparent";
  
  // 只有当localStorage中没有oldname时，才存入当前值作为原始值
  if (!window.localStorage.getItem("oldname")) {
    window.localStorage.setItem("oldname", name.value);
  }
  
  // 移除这里的重复事件绑定代码！
}

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