jquery - 单击复选框时阻止 Fancybox 弹出窗口

Question

我的图像中的复选框有问题。单击图像时 fancybox 打开正常。如果我再次单击复选框，fancybox 打开。单击复选框时不应打开它。

HTML 代码

<div class="picture"> 
<a  href="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_m.jpg" class="fancybox popup_fancy"  rel="gallery1" id="fancybox_popup"> 
<img src="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_m.jpg" alt=""> 
<div class="img-overlay">
<input type="checkbox"  class="img_checkobx" name="imgcheckbox"  onclick="checkBox(this);"/>
 </div></a> </div>

图像将如下所示

和fancybox js像这样

$(document).ready(function() {
    $(".fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none'
    });

});

当复选框为单击事件时，防止弹出 fancybox。任何人都可以建议如何解决这个问题。提前致谢

Answer 1

只需在 上使用 e.stopImmediatePropagation() 来停止 事件 向 sibling 的传播单击复选框如下:

$('.img_checkobx').click(function(e){
    e.stopImmediatePropagation();
});

<强> DEMO HERE