禁用 jQuery 函数 onClick 然后启用函数

Question

我在我的网站中使用了三个 jQuery 函数。

在我的function.js 文件中，我还使用 document.ready 来调用我的函数。

这是我的 jQuery 代码：

$(document).ready(function() {
    bottom_cartouche();
    pre_scroll_cartouche_top();
    pre_scroll_cartouche_bottom();
});

function pre_scroll_cartouche_top() {
    var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
    var cartouche_fixed_H = $('.cartouche_fixed').height();
    var cartouche_top_position = -($('.cartouche_top').height() - $('.top_table').height());

    /*----------------------------- TOP ---------------------------------------------------*/

    $('.cartouche_top').on("mouseenter", function() {
        $('.cartouche_top').stop().animate({
            top: -$('.cartouche_top').height() + $('.cartouche_fixed').height()
        });

        $('.archives_open').on('click', function() {
            $('.cartouche_top').stop().animate({
                top: '0px'
            }, function() {
                $('.cartouche_fixed').addClass('active');
            });
            $('.archive_close').css('opacity', '1');
        });

        $('.archive_close').on('click', function() {
            $('.archive_close').css('opacity', '0');

            $('.cartouche_fixed').removeClass('active');

            $('.cartouche_top').stop().animate({
                top: cartouche_top_position
            });
        });
    });

    $('.cartouche_top').on("mouseleave", function() {
        $('.cartouche_fixed').removeClass('active');
        $('.cartouche_top').stop().animate({
            top: cartouche_top_position
        });
    });
}

function pre_scroll_cartouche_bottom() {
    var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
    var cartouche_fixed_H = $('.cartouche_fixed').height();
    var cartouche_top_position = -($('.cartouche_top').height() - $('.top_table').height());

    /*----------------------------- BOTTOM ---------------------------------------------------*/

    $('.cartouche_bottom').on("mouseenter", function() {
        $('.layout_bottom').slideUp();

        $('.cartouche_bottom').stop().animate({
            top: $(window).height() / 1.5
        });
    });

    $('.cartouche_bottom').on("mouseleave", function() {
        $('.layout_bottom').slideDown();

        $('.cartouche_bottom').stop().css('position', 'fixed').animate({
            top: cartouche_bottom_position
        });
        $('.cartouche_bottom_inside').removeClass('active');
        $('.bottom_close').hide();
    });
}

function bottom_cartouche() {
    var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();

    $('.cartouche_bottom_inside').on('click', function(e) {
        e.preventDefault();

        if (!$(this).is('.active')) {
            $('.layout_bottom').slideUp();

            $('.cartouche_bottom').css({
                'position': 'absolute',
                'cursor': 'text',
                'left': '0'
            }).animate({
                top: $(".top_table").height();
            });

            $('.bottom_close').show();
            $(this).addClass('active');
        }
    });

    $('.bottom_close').click(function() {
        $('.cartouche_bottom').css({
            'position': 'fixed',
            'cursor': 'context-menu'
        }).animate({
            top: cartouche_bottom_position
        }, function() {
            $('.cartouche_bottom_inside').removeClass('active');
        });

        $('.bottom_close').hide();

        $('.layout_bottom').slideDown();
    });
}

我正在尝试在我的第三个函数（函数 bottom_cartouche()）中添加开/关操作。

我想，当“$('.cartouche_bottom_inside').on('click', function(e){” 禁用pre_scroll_cartouche_top()和pre_scroll_cartouche_bottom()功能

当“$('.bottom_close').click(function(){”再次启用这2个功能时。

我尝试使用开/关、绑定和取消绑定，但我找不到让它工作的方法。

这是我尝试过的：

    function bottom_cartouche(){

        var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();

    $('.cartouche_bottom_inside').on('click', function(e){

        e.preventDefault();

        if( !$(this).is('.active') ){

// 禁用 //

    $('.cartouche_top').off('mouseenter',pre_scroll_cartouche_top());
    $('.cartouche_bottom').off('mouseleave',pre_scroll_cartouche_bottom());

// 结束禁用 //

            $('.layout_bottom').slideUp();

            $('.cartouche_bottom').css({'position' : 'absolute', 'cursor' : 'text', 'left' : '0'}).animate({

            top :$(".top_table").height();

            });

            $('.bottom_close').show();

            $(this).addClass('active');

        }

    });

    $('.bottom_close').click(function(){

// 启用 //

    $('.cartouche_top').on('mouseenter',pre_scroll_cartouche_top());
    $('.cartouche_bottom').on('mouseleave',pre_scroll_cartouche_bottom()); 

// 结束启用 //

        $('.cartouche_bottom').css({'position' : 'fixed', 'cursor' : 'context-menu'}).animate({

            top : cartouche_bottom_position

            },function(){   $('.cartouche_bottom_inside').removeClass('active');
        });

        $('.bottom_close').hide();

        $('.layout_bottom').slideDown();

    });

    }

尝试禁用时，只有第一个功能被禁用，再次启用时，它根本不起作用......

谁能帮我解决这个问题？

Answer 1

我找到了一个使用不同方法的解决方案，其中包含 if 语句和 2 个变量（flag_top 和 flag_bottom） . 这是我的代码，也许它可以帮助：

function pre_scroll_cartouche_top(){


        var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
        var cartouche_fixed_H = $('.cartouche_fixed').height();
        var cartouche_top_position = - ($('.cartouche_top').height()-$('.top_table').height());
        var flag_top = 0;
        /*----------------------------- TOP ---------------------------------------------------*/

        $('.cartouche_top').on("mouseenter", function(){
            if(flag_top==0){
                $('.cartouche_top').stop().animate({top : -$('.cartouche_top').height()+$('.cartouche_fixed').height()});

                $('.archives_open').on('click', function(){
                    flag_top = 1;

                    $('.cartouche_top').stop().animate({top : '0px'},function(){

                        $('.cartouche_fixed').addClass('active');

                    });

                    $('.archive_close').css('opacity','1');

                });

                $('.archive_close, .index_tableau a').on('click', function(){
                    flag_top = 0;
                    $('.archive_close').css('opacity','0');

                    $('.cartouche_fixed').removeClass('active');

                    $('.cartouche_top').stop().animate({top : cartouche_top_position});


                });
            }
        });

        $('.cartouche_top').on("mouseleave", function() {
            if(flag_top==0){
                    $('.cartouche_fixed').removeClass('active');
                    $('.cartouche_top').stop().animate({top : cartouche_top_position});
            }

        });
    }

    function bottom_cartouche(){

        /*----------------------------- PRE SCROLL BOTTOM ---------------------------------------------------*/


        var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
        var cartouche_fixed_H = $('.cartouche_fixed').height();
        var cartouche_top_position = - ($('.cartouche_top').height()-$('.top_table').height());
        var flag_bottom = 0;
        /*----------------------------- MOUSEENTER ---------------------------------------------------*/


        $('.cartouche_bottom').on("mouseenter", function(){
            if(flag_bottom==0) {
                        $('.layout_bottom').slideUp();

            $('.cartouche_bottom').stop().animate({top :$(window).height()/1.5});
    }
        });

        /*----------------------------- MOUSELEAVE ---------------------------------------------------*/

        $('.cartouche_bottom').on("mouseleave", function(){
            if(flag_bottom==0) {
            $('.layout_bottom').slideDown();

            $('.cartouche_bottom').stop().css('position','fixed').animate({
                top :cartouche_bottom_position
            });
            $('.cartouche_bottom_inside').removeClass('active');
                $('.bottom_close').hide();

}

        });


        /*----------------------------- OUVERTURE BOTTOM ---------------------------------------------------*/

        $('.cartouche_bottom_inside').on('click', function(e){
            e.preventDefault();
            if( !$(this).is('.active') ){
                            flag_bottom=1;

                $('.layout_bottom').slideUp();
                //$('.slideshow').css('position','initial');
                $('.cartouche_bottom').css({'position' : 'absolute', 'cursor' : 'text', 'left' : '0'}).animate({
                top :$(".top_table").height(),
                });


                $('.bottom_close').show();
                if ($('.cartouche_bottom_inside').height() < $(window).height() ) {
            }
                $(this).addClass('active');

            }
        });

        /*----------------------------- FERMETURE BOTTOM ---------------------------------------------------*/

        $('.bottom_close').click(function(){
            flag_bottom=0;

            $('.cartouche_bottom').css({'position' : 'fixed', 'cursor' : 'context-menu'}).animate({
            top : cartouche_bottom_position
            },function(){   $('.cartouche_bottom_inside').removeClass('active');
        });
            $('.bottom_close').hide();

                    //$('.slideshow').css('position','relative');

                        $('.layout_bottom').slideDown();


        });

}

Answer 2

off时不需要函数名

$('.cartouche_top').off('mouseenter');
$('.cartouche_bottom').off('mouseleave');

当您绑定或取消绑定事件时，不要忘记元素必须属于DOM（已经创建）。其他情况使用此代码：

$(document).off('mouseenter','.cartouche_top');
$(document).off('mouseleave','.cartouche_bottom');

Answer 3

在调用on/off时尝试去掉括号，你应该引用函数，而不是执行函数：

$('.cartouche_top').off('mouseenter',pre_scroll_cartouche_top);
$('.cartouche_bottom').off('mouseleave',pre_scroll_cartouche_bottom);