javascript - 有人知道为什么第一个 onClick 事件不能正常工作，而第二个不能正常工作吗？

Question

我在尝试创建在第一个框中看到的 onClick 事件并通过创建在第二个框中看到的第二种方法来修复它时遇到了这个问题，但我不明白为什么第一种方法不起作用，有人知道为什么?

function test() {

  document.body.style.padding = "0";
  document.body.style.margin = "0";
  document.body.style.backgroundColor = "#222";


  let container = document.createElement("div");
  let first_box = document.createElement("div");
  let second_box = document.createElement("div");

  container.appendChild(first_box);
  container.appendChild(second_box);

  document.body.appendChild(container);

  container.style.height = "150px";
  container.style.display = "flex";
  container.style.justifyContent = "center";
  container.style.alignItems = "center";

  first_box.style.height = "50%";
  first_box.style.width = "20%";
  first_box.style.backgroundColor = "#fff";
  first_box.style.cursor = "pointer";
  first_box.style.marginRight = "2%";

  second_box.style.height = "50%";
  second_box.style.width = "20%";
  second_box.style.backgroundColor = "#fff";
  second_box.style.cursor = "pointer";

  //onClick event
  let btn1_status = 0;
  let btn2_status = false;

  if (btn1_status === 0) {
    first_box.onclick = function() {
      this.style.backgroundColor = "#456";
      btn1_status = 1;
    };
  } else if (btn1_status === 1) {
    first_box.onclick = function() {
      this.style.backgroundColor = "#fff";
      btn1_status = 0;
    };
  };

  function box2() {
    if (btn2_status === false) {
      second_box.style.backgroundColor = "#654";
      btn2_status = true;
    } else if (btn2_status === true) {
      second_box.style.backgroundColor = "#fff";
      btn2_status = false;
    };
  };
  second_box.onclick = function() {
    box2();
  };
};
console.log(test());

标签： javascript

Answer 1

问题在于first_box：由于该test()函数执行一次，它仅附加第一个事件侦听器，所有这部分：

} else if (btn1_status === 1) {
    first_box.onclick = function() {
      this.style.backgroundColor = "#fff";
      btn1_status = 0;
    };
  };

实际上是死代码（假设函数运行一次）。多次运行test实际上会添加一个事件监听器，造成执行的极大混乱（以及内存泄漏）。

这是一个更正的解决方案：

function test() {

  document.body.style.padding = "0";
  document.body.style.margin = "0";
  document.body.style.backgroundColor = "#222";


  let container = document.createElement("div");
  let first_box = document.createElement("div");
  let second_box = document.createElement("div");

  container.appendChild(first_box);
  container.appendChild(second_box);

  document.body.appendChild(container);

  container.style.height = "150px";
  container.style.display = "flex";
  container.style.justifyContent = "center";
  container.style.alignItems = "center";

  first_box.style.height = "50%";
  first_box.style.width = "20%";
  first_box.style.backgroundColor = "#fff";
  first_box.style.cursor = "pointer";
  first_box.style.marginRight = "2%";

  second_box.style.height = "50%";
  second_box.style.width = "20%";
  second_box.style.backgroundColor = "#fff";
  second_box.style.cursor = "pointer";

  //onClick event
  let btn1_status = 0;
  let btn2_status = false;

  first_box.onclick = function() {
    if (btn1_status === 0) {
      this.style.backgroundColor = "#456";
      btn1_status = 1;
    }else if (btn1_status === 1) {
      this.style.backgroundColor = "#fff";
      btn1_status = 0;
    }
  };

  function box2() {
    if (!btn2_status) {
      second_box.style.backgroundColor = "#654";
      btn2_status = true;
    } else {
      second_box.style.backgroundColor = "#fff";
      btn2_status = false;
    };
  };
  second_box.onclick = function() {
    box2();
  };
};
console.log(test());