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());

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());

有人知道为什么第一个onClick事件不能正常工作而第二个事件却可以正常工作吗？

1 个答案: