jquery - .click仅在父容器上，不影响子容器

我正在网站上创建叠加层/模式/弹出窗口。

当用户单击按钮时，将显示覆盖图。要关闭叠加层，我希望用户能够单击页面外部区域的任何位置（例如，在我的示例中为黑色不透明区域）。

JSFiddle：https://jsfiddle.net/7ewexsqr/

我设置了以下内容：

$('.overlay-wrapper').click(function(){
        $('.overlay-wrapper').css('opacity','0');
        $('.overlay-wrapper').css('z-index','-100');
    });

这可以正常工作，但是它也会影响在.overlay-content div（.overlay-wrapper的子级）内部单击。我希望用户能够在内容框中单击/突出显示等内容，而不触发click事件。

如何使此点击事件不适用于内部内容？

最佳答案

检查event.target，如果它是.overlay-content或.overlay-content的后代，请不要关闭弹出窗口（可以使用.closest()，因为它将对其进行自我测试）：

var $target = $( e.target );

if ( $target.closest( '.overlay-content' ).length ) {
    return true;
}

Here's a fiddle

关于jquery - .click仅在父容器上，不影响子容器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31789363/