点击事件追踪时对象数组元素被重复覆盖问题求助

错误原因 #

你在事件外部定义了唯一的trackObject对象，每次点击时只是修改这个对象的属性值，然后把它的引用推入details数组。数组里的所有元素其实都指向同一个内存地址的对象——也就是说，数组里存的不是对象的副本，而是指向这个对象的“指针”。所以当你下次点击修改trackObject的属性时，数组里之前所有存入的条目都会跟着变化，因为它们本质上都是同一个对象。

解决方法 #

每次点击事件触发时，创建一个新的对象来存储当前点击目标的信息，避免复用同一个全局对象。

修改后的代码示例1（直接在回调内创建新对象） #

let container = document.querySelector(".container");
let details = [];

container.addEventListener("click", function(e) {
  // 每次点击都生成一个独立的新对象
  let trackObject = {
    textContent: e.target.textContent,
    id: e.target.id,
    tagName: e.target.tagName,
    className: e.target.className
  };

  details.push(trackObject);
  console.log(details);
});

修改后的代码示例2（基于模板创建新对象） #

如果需要保留对象结构的模板，可以用扩展运算符复制模板并赋值：

let container = document.querySelector(".container");
let details = [];
// 仅作为结构模板，不直接修改
const trackTemplate = {
  textContent: null,
  id: null,
  tagName: null,
  className: null
};

container.addEventListener("click", function(e) {
  // 基于模板创建新对象，确保每次都是独立实例
  let trackObject = {
    ...trackTemplate,
    textContent: e.target.textContent,
    id: e.target.id,
    tagName: e.target.tagName,
    className: e.target.className
  };

  details.push(trackObject);
  console.log(details);
});

这样每次点击生成的对象都是独立的内存实例，存入数组后不会被后续的点击操作修改。

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