嵌套div中click事件中的target元素

Question

我有两个嵌套的div

var toast: Toast = {
  type: 'success',
  title: 'parent',
  onShowCallback: (toast) => {
    // stuff here
  }  
};

this.toasterService.pop(toast);

我正在尝试实现模态对话框效果。我的CSS和jQuery在显示模态对话框时工作正常。

当我尝试使用以下jQuery隐藏模态对话框时。

<div class="modal-container">
    <div class="modal-content"></div>
</div>

它隐藏了模态容器，但问题是即使我点击模态内容div也会隐藏它。我想要实现的是常规模态效果，允许在不关闭模态对话框的情况下单击内部内容，但是当单击灰色区域（在内部内容div之外）时，它应该关闭对话框。

我们如何在不使用div的id的情况下实现它，因为我有多个内容div，我想用类选择器来处理它。

Answer 1

您可以使用event.target检查点击的元素是否为.modal-container

$(".modal-container").click(function (event) {
    if(event.target == this){
        $(this).hide();
    }
});

但由于你已经在使用jQuery，我建议使用一个模态插件，因为它们具有此功能和许多其他内置功能（有很多你可以免费找到）

Answer 2

您的点击事件正在冒泡到隐藏模态的容器。 Read about it here

在内容点击阻止点击事件传播

$(".modal-content").click(function (event) {
    event.stopPropagation();
});

有关stopPrapagation

的更多信息

Answer 3

试试这个

$(".modal-container").click(function (event) {
    $(event.target).hide()

});