在父级执行onclick时设置onclick on parent结果，无意Javascript

Question

我有一个布局，我认为不必在此发布。但它基本上是一个宽度和高度非常小的父div，它位于页面的右下方，如果点击它，它会扩大宽度和高度。

这里我遇到了问题：

父级包含onclick，如果单击，则会更改其大小以及禁用其onclick并向图像添加onclick，这是一个将父div最小化为原始大小的按钮。

如果再次点击图像，我会禁用图像上的onclick并在主要父级上添加onclick。但是，由于图像在父级内部，因此Javascript正在执行onclick，因为它认为已单击它。

要解决此问题，我必须设置一个setTimeout来将onclick添加到父级，这解决了问题，但有更好的方法，为什么会发生这种情况？

Tahnks

function adjust_window_displayed(el, main_el){
var val = el.value;
var img_el = document.getElementById("img_envelope");
if(val === "true"){
    document.getElementById("display_mail_info").style.display = "block";
    img_el.src = "https://co.uk/minimise.png";
    img_el.style.cursor = "pointer";
    main_el.style.cursor = "default";
    main_el.onclick = function () {
      return false;
    };
    el.value = "false";
    img_el.onclick = function () {
        adjust_window_displayed(el, main_el);
        console.log("first");
    };
    console.log("first " + main_el.className);
}else{
    document.getElementById("display_mail_info").style.display = "none";
    img_el.src = "https://dco.uk/envelope.png";
    img_el.style.cursor = "default";
    main_el.style.cursor = "pointer";
    el.value = "true";
    img_el.onclick = function () {
        return false;
    };
    setTimeout(function() {
        main_el.onclick = function () {
            adjust_window_displayed(el, main_el);
            console.log("sec");
        };
    }, 700);
    console.log("second " + main_el.className);
}
}