阻止子执行附加到容器的函数

编程问答 2022-08-27

问题描述

我有这个删除弹出 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;
        }
    });

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

event-delegationjavascriptpopup