jquery - Jquery：隐藏孩子当用户在父级内部单击时

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();
});

Answer 2

$(".video-field-new:parent").click(function() {
    $(this).find(".video-field-new").hide();
});

Answer 3

$("#BodyField").click(function(){ $(".video-field-new").hide(); });