javascript - 防止子执行附加到容器的函数

Question

我有这个删除弹出 div

        <div class="delete-popup">
            <div class="popup-icon-box">
                <img src="icon/delete-icon.svg" alt="delete-icon" class="popup-icon" />
            </div>
            <h4 class="heading">Kamu yakin ingin menghapus?</h4>
            <p class="popup-text">Setiap buku yang telah dihapus tidak dapat dikembalikan lagi</p>
            <div class="popup-confirmation-button">
                <button class="btn btn--outline no-opacity">Cancel</button>
                <button class="btn btn--red">Delete</button>
            </div>
        </div>

这是我附在文件中的事件代表团

document.addEventListener("click", function (e) {
        if (isPopupShowed) {
            if (!e.target.classList.contains("delete-popup")) {
                deletePopup.classList.remove("show-popup");
                deletePopup.classList.add("close-popup");
                isPopupShowed = false;

                deletePopup.addEventListener("animationend", function () {
                    deletePopup.classList.remove("close-popup");
                });
            }
        }

        if (e.target.classList.contains("delete")) {
            deletePopup.classList.add("show-popup");
            isPopupShowed = true;
        }
    });

在if(isPopupShowed)内部，我检查用户是否在弹出容器外部单击，然后弹出窗口将关闭，但是如果我单击容器本身内部的元素（例如标题/图标/等），它也会关闭弹出容器。我如何防止这种情况发生？我尝试使用 stopPropagation 但它似乎不起作用。

标签： javascriptpopupstoppropagationevent-delegation