0

这是我的问题。我编写了一些自定义 jquery 来切换我网站上的登录表单。然后，我添加了一些我在此处找到的代码，如果您单击它来关闭该框。

问题出现了，因为我有一个链接到这个 div 内的一个花式框，它可以切换进/出。因为我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的功能吗？

4

1 回答 1

3

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单击链接处理程序

于 2013-01-29T17:46:56.890 回答