单击按钮会触发 div 的 onClick()，而 stopPropagation 只会触发一次。为什么只有一次？

Question

我有一个 div 元素，单击该元素会创建另一个 div 和一个 button。单击时，第一个 div 应创建第二个 div（覆盖），按下关闭按钮后，覆盖应关闭。我希望这个过程是可重复的，但我目前面临的问题是它只能工作一次。

即：我单击 div，然后会出现一个带有按钮的叠加层。我单击按钮关闭叠加层，然后它就消失了。然后我再次单击 div，再次出现带有按钮的叠加层。但是这次当我按下关闭按钮时，它只是打开了另一个覆盖层。我怎样才能阻止这种情况发生？不知所措，求助

async function addClickListener2(div, imageName, tag) {
    div.addEventListener('click', async function () {  // closes on X button click, but opens again right away
        if (this.className === 'card loaded') {
            const overlay = document.createElement('div'); // create div 'overlay'
            const button = document.createElement('button');
            overlay.id = 'overlay'; // assign id for css
            div.appendChild(overlay); // append to clicked div so overlay isn't at top of page
            overlay.style.display = 'block'; // make overlay visible
            overlay.innerText = JSON.stringify(await getManifest(imageName, tag));
            button.id = 'overlayButton';
            button.innerText = 'X';
            overlay.appendChild(button);
            overlayCloseButton();
        }
    })
}

function overlayCloseButton() {
    document.getElementById('overlayButton').addEventListener('click', function (e) {
        e.stopPropagation(); // Only works once
        document.getElementById('overlay').style.display = 'none';
    })
}

Answer 1

如果这个问题对其他人有用，我已经通过简单地删除覆盖而不是使用 .remove().

隐藏它来解决问题。

    div.addEventListener('click', async function () { 
        if (this.className === 'card loaded') {
            const pre = document.createElement('pre');
            const overlay = document.createElement('div'); // create div 'overlay'
            const button = document.createElement('button');
            overlay.id = 'overlay'; // assign id for css
            document.body.appendChild(overlay); 
            pre.innerText = JSON.stringify(await getManifest(imageName, tag), null, 2);
            button.id = 'overlayButton';
            button.innerText = 'X';
            overlay.appendChild(button);
            overlay.appendChild(pre);
            addOverlayCloseHandler();
        }
    })
}

function addOverlayCloseHandler() {
    document.getElementById('overlayButton').addEventListener('click', function (e) {
        document.getElementById('overlay').remove();
    })
}

单击按钮会触发 div 的 onClick()，而 stopPropagation 只会触发一次。为什么只有一次？

Clicking a button triggers an onClick() for the div, and stopPropagation only triggers once. Why only once?

javascript

function

click

listener

stoppropagation