Question

我正在用JavaScript模态实现自己的对话框。我的代码为对话框本身定义了一个自定义组件。

updateOwner(id) {
    let owner = document.querySelector(`#${id}`) || document.body;
    let modal = this.createModal();

    modal.append(this);
    owner.append(modal);
}

上述方法有效地允许使用带有模式的自定义对话框，以防止文档主体获得焦点。现在，我想以一种方式来实现它：如果用户单击模态区域，则模态和对话框关闭，但是它不应该包括对话框区域本身。

createModal() {
    let modal = document.createElement("div");
    modal.className = "ws-modal";

    modal.addEventListener(
        "click",
        function(event) {
            event.stopPropagation();
            modal.remove();
        },
        {capture: true}
    );

    return modal;
}

但是，它仍然执行相同的操作，即使用户单击对话框区域，模态和对话框也会关闭。我究竟做错了什么？我尝试处理事件处理，但没有捕获事件，只是调用event.stopPropagation()以停止任何冒泡效果。

Answer 1

由于我已经找到了解决该问题的方法，所以我现在将结束这个问题。通过将事件侦听器添加到对话框本身，我设法调用event.stopPropagation()来防止单击对话框时关闭整个模式。

updateOwner(id) {
    let owner = document.querySelector(`#${id}`) || document.body;
    let modal = this.createModal();

    modal.append(this);
    owner.append(modal);

    modal.addEventListener("click", modalClicked);
    this.addEventListener("click", dialogClicked);
}


function modalClicked() {
    this.remove();
}


function dialogClicked() {
    event.stopPropagation();
}

单击时停止关闭对话框

1 个答案: