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

Question

我的复选框有问题 image.While 点击图片 fancybox 打开 fine.If 我再次点击复选框 fancybox opened.It 点击复选框时不应该打开。

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

});

防止复选框在点击事件时弹出花式框。谁能建议如何提前解决这个问题problem.Thanks

Answer 1

您可以防止点击复选框时出现花式框

$('.img_checkobx').click(function(){
   $.fancybox.cancel();
});

Answer 2

只需使用 checkbox click 上的 e.stopImmediatePropagation() 将 event 的 propagation 停止到 siblings，如下所示：

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

DEMO HERE

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

Fancybox popup prevent when checkbox is clicked

html

jquery

fancybox

fancybox-2