javascript - jQuery 点击 div 外面应该隐藏 div，点击的子 div 不应该隐藏

Question

我有这样的 HTML 标记

<div class="outside">
    <div class="wrapper">
        <div class="content-wrap">
            <div class="content">
                <div class="content-container">
                    <div class="text">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我希望当鼠标在 content-wrap div 的外部单击时，content-wrap div 应该被隐藏。在我的标记中，您可以看到我在 content-wrap 之前使用了两个名为 outside 和 wrapper 的 div。但实际上我在内容换行之前有很多 div。如果点击了 content-wrap 的任何子 div，则不应隐藏该 div。那么有人可以告诉我该怎么做吗？任何帮助和建议都将非常感激。 这是 fiddle link

Answer 1

您可以在 .content-wrap 的点击事件上调用 stopPropagation() 来防止 Action 冒泡:

$('div.content-wrap').click(function(e) {
    e.stopPropagation()
});

$("body").click(function(){
   $(".content-wrap").fadeOut(); 
});

FIDDLE