单击按钮会触发 div 的 onClick（），而 stopPropagation 仅触发一次。为什么只有一次？-解网

问：

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

IE浏览器：我单击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';
    })
}

JavaScript 函数 click listener stoppropagation

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

上一个：如何在表上使用 .filter（）？

下一个：PostgreSQL：连接函数结果表

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

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

评论