单击时隐藏 div，但单击内部图像时不执行任何操作

Question

我有一个 div main-wrap和一个图像。

我想在单击它时隐藏main-wrap 。 但是当您单击 main-wrap 内的图像时，我不想做任何事情。 现在我有这个非工作代码。 当我点击图像 main-wrap 仍然隐藏。 （隐藏的是我的班级.hidden {display:none} ）

<div class="main-wrap" >
    <div class="photo-wrap">
        <img style="cursor:default;"  onclick = "return false;" class="img img-responsive" src = "/stat_photo/1.jpg"/>

    </div>
</div>

我有这个代码

 $(document).ready(function() {
   $('.main-wrap').click(function(){$('.main-wrap').addClass('hidden')});
 });

Answer 1

$('.main-wrap').click(function(e) {
   $(this).addClass('hidden');
}).on('click', 'img', function(e) {
  return false;
});

https://jsfiddle.net/bfwsqxko/1/

我添加了一个点击事件，它扩展了一个异常点击图像，它被设置为return false;

Answer 2

我结束了这个代码

$('.main-wrap').on('click', function(e) {
                    $('.main-wrap').addClass('hidden');
                }).on('click', 'img', function(e) {
                    // clicked on descendant div
                    e.stopPropagation();
});

这是从这里获取的如何让点击事件只在父 DIV 上触发，而不是在子级上触发？ （虽然接受的答案不起作用）

Answer 3

最好添加图像的 id。 然后将 .img 替换为 #yourid

  $(document).ready(function() {
          $('.main-wrap').not('.img').click(function(){$('.main-wrap').addClass('hidden')});
        });