Question

我有一个div 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;

谢谢＆amp;问候

Answer 2

我最终得到了这段代码

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

取自这里 How to have click event ONLY fire on parent DIV, not children? （接受的答案虽然不起作用）

Answer 3

最好添加图片的ID。然后用#yourid

替换.img

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

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

3 个答案: