Question

这是我的问题。我写了一些自定义jquery来切换我网站上的登录表单。然后我添加了一些我在这里找到的代码，如果你点击它就关闭那个盒子。

问题出现了，因为我有一个链接到这个div里面的fancybox切换进/出。因为我正在使用event.stopPropagation();以及点击，所以它与该fancybox链接混淆。完整的代码示例如下。

//Login Toggle
    $('a.login').click(function() {
        if ($('.login-box').is(':hidden')){
            $('.login-box').fadeIn('normal');
            $('span.arrow-up').fadeIn('normal');
            $(this).text('Close');
        }
        else{
            $('.login-box').fadeOut('normal');
            $('span.arrow-up').fadeOut('normal');
            $(this).text('Log-In');
        }
    });
    //Close when click off login
    $('html').click(function() {
        $('.login-box').fadeOut('normal');
        $('span.arrow-up').fadeOut('normal');
        $('a.login').text('Log-In');
    });
    //Exclude these divs, so clicking inside them won't close login
    $('.login-box, a.login, span.arrow-up').click(function(event){
        event.stopPropagation();
    });

    //Forgot Password Fancybox
    $("a.fancybox").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'fade',
        closeEffect : 'fade'
    });

如果我取出stopPropagation，一切都按预期工作（fancybox按钮工作），我只是无法通过点击它来关闭登录框。任何人都可以用更聪明的方式来帮助我，而不会打破fancybox的功能吗？

Answer 1

event.stopPropagation()阻止事件到达fancybox设置的处理程序

您需要允许定位a.fancybox的事件继续传播

$('.login-box, a.login, span.arrow-up').click(function(event){
    if ($(event.target).hasClass('fancybox') == false) {
        event.stopPropagation();
    }
});

这将允许事件传播任何具有“fancybox”类

的元素

这与您的问题无关，但我建议您添加event.preventDefault()或return false以点击链接处理程序

无法让fancybox链接在内部切换框内工作

1 个答案: