Jquery:当用户单击父 <div> 内部时隐藏子 <div>

Question

我有以下代码，并且希望当用户单击其父 DIV 内的任意位置时隐藏 DIV。如果用户在父 DIV 外部单击，则不会发生任何事情。

<div id="BodyField">
    <div class="video-field-new"></div>
</div>

所以我希望当用户点击 #BodyField 内部时隐藏带有“video-field-new”的 DIV。

背景:当视频是新的时，我有一个小横幅覆盖在角落里的视频上，但我不希望它在用户播放视频时阻止视频播放器。因此，理想情况下，当用户单击播放 #BodyField 内的视频时，横幅将隐藏。

Answer 1

$('#BodyField').on('click', function() {  
    $(this).children('.video-field-new').hide();
});

您还需要防止来自 .video-field-new 的点击事件传播到其父级，否则点击要播放的视频将导致其自身被隐藏。

$('#BodyField .video-field-new').on('click', function(e) {  
    e.stopPropagation();
});