修改条件后if仍返回true？移除onclick的div仍执行functionX逻辑

问题代码 #

HTML代码 #

<div class="MyClass" id="1" onclick="functionX()">  </div>
<div class="MyClass" id="2" onclick="functionX()">  </div>

JavaScript代码 #

functionX() {
  if (document.getElementById("1").hasAttribute("onclick")) {
    window.onclick = e => {
      document.getElementById(e.target.id).appendChild(document.createElement("div", {
        class: "someClass"
      }));
    }
  }
}

if (document.getElementById("1").contains(document.getElementById("1").querySelector("[class='someClass']"))) 
{
  let foo = document.getElementsByClassName('myClass');
  for (let i = 0; i < foo.length; i++) 
  {
    foo[i].removeAttribute("onclick");
  }
}

现象 #

点击已移除onclick属性的div时，functionX中的条件判断仍会执行。

问题原因 #

• 移除逻辑仅执行一次，初始条件不满足：页面加载时会立即执行移除onclick的代码，但此时#1内还没有.someClass子元素，if条件不成立，移除操作未执行。后续即使添加了目标元素，这段代码也不会自动重新运行。
• 类名大小写不匹配：HTML中类名为MyClass（首字母大写），但JS里用getElementsByClassName('myClass')（首字母小写）——该方法严格区分大小写，因此找不到目标元素，无法执行移除操作。
• 事件绑定冗余：每次触发functionX都会给window重新绑定onclick事件，多次点击会导致事件叠加；且因事件冒泡机制，div的onclick会先于window的onclick执行。

修复方案 #

方案1：添加元素后立即执行移除操作 #

修改functionX逻辑，在添加.someClass元素后直接移除所有目标元素的onclick，同时修正类名大小写：

functionX() {
  const el1 = document.getElementById("1");
  if (el1.hasAttribute("onclick")) {
    // 先清空之前的window事件，避免重复绑定
    window.onclick = null;
    window.onclick = e => {
      const target = document.getElementById(e.target.id);
      target.appendChild(document.createElement("div", {
        class: "someClass"
      }));
      // 移除所有MyClass元素的onclick属性及事件监听
      Array.from(document.getElementsByClassName('MyClass')).forEach(item => {
        item.removeAttribute("onclick");
        item.onclick = null;
      });
    }
  }
}

方案2：用MutationObserver监听元素变化 #

如果需要在.someClass元素出现时自动触发移除操作，可以使用MutationObserver监听元素变化：

// 监听#1元素的子元素变更
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length > 0) {
      const hasTargetClass = Array.from(mutation.addedNodes).some(node => node.classList?.contains('someClass'));
      if (hasTargetClass) {
        // 执行移除操作
        Array.from(document.getElementsByClassName('MyClass')).forEach(item => {
          item.removeAttribute("onclick");
          item.onclick = null;
        });
        // 完成后停止监听
        observer.disconnect();
      }
    }
  });
});

observer.observe(document.getElementById("1"), { childList: true });

functionX() {
  const el1 = document.getElementById("1");
  if (el1.hasAttribute("onclick")) {
    window.onclick = e => {
      document.getElementById(e.target.id).appendChild(document.createElement("div", {
        class: "someClass"
      }));
    }
  }
}

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