0

これが私の問題です。私のサイトのログインフォームを切り替えるために作成されたカスタムjqueryがあります。次に、ここで見つけたコードを追加して、クリックするとそのボックスを閉じます。

このdiv内にイン/アウトを切り替えるファンシーボックスへのリンクがあるため、問題が発生します。クリックオフと一緒に使用しているのでevent.stopPropagation();、そのファンシーボックスのリンクが台無しになります。完全なコード例を以下に示します。

//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の機能を壊さない、よりスマートな書き方を教えてくれる人はいますか？

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 に答える