嵌套 div 中单击事件中的目标元素答案

【问题标题】：target element in click event in nested divs嵌套 div 中单击事件中的目标元素
【发布时间】：2016-12-06 15:40:44
【问题描述】：

我有两个嵌套的 div

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

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

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

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

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

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

【问题讨论】：

【解决方案1】：

你可以使用event.target来检查被点击的元素是不是.modal-container

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

试试这个

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

});

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！