Jquery:当用户在父<div>中单击时隐藏子<div>

Question

我有以下代码,并希望在用户点击其父DIV中的任何位置时隐藏DIV.如果用户点击父DIV之外,则不会发生任何事情.

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

因此,当用户点击#BodyField内部时,我希望DIV带有"video-field-new".

背景:当视频是新视频时,我有一个小横幅放在角落里的视频,但我不希望它在用户播放视频时阻止视频播放器.因此,理想情况下,当用户点击播放#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();
});