Citizen602214085
Citizen602214085

Reputation: 163

How to deactivate a function after being activated

I can activate a function on a certain click event but I want to stop that function whenever I do a click event on another div.

This is my function so far :

$('#text-tab').click(function() {
    writeOnCanvas(true);
});

$('#paint-tab, #sticker-tab, #done-tab').click(function() {
    writeOnCanvas(false);
});


function writeOnCanvas(bool) {
    if(bool) {
        $('body').click(function(e) {

            var clickedOnCanvas = e.target.id == "canvas" || $(e.target).parents('#canvas').length ? true : false;
            var alreadyTextArea = $('textarea.textarea_editable')[0];

            if(clickedOnCanvas) {
                if(alreadyTextArea) {
                    drawSentence();
                } else {
                    createTextArea(e);
                }
            }
        });

        $('#text > div > .color_choice').click(function() {
            var textColor = $(this).css('background-color');
            $('.textarea_editable').css('color', textColor);
        });

        $('#text > div > div:not(".color_choice")').click(function() {
            var textSize = $(this).css('font-size');
            $('.textarea_editable').css('font-size', textSize);
            $('canvas').attr('data-textSize', textSize);
        });
    } else {
        console.log('stop working');
        return false;
    }
}

As you can see, when I click on #text-tab, I put my function to "true", this is working perfectly. However, even if I click on #paint-tab, #sticker-tab or even #done-tab, the function is still working even thought I see the console.log('stop working');

EDIT :

I tried to put a global variable but now my function refuse to work even if I click on #text-tab and the global variable is set to true.

var WRITEONCANVAS = false;
writeOnCanvas();

$('#text-tab').click(function() {
    WRITEONCANVAS = true;
});

$('#paint-tab, #sticker-tab, #done-tab').click(function() {
    WRITEONCANVAS = false;
});


function writeOnCanvas() {
    if(WRITEONCANVAS) {
        $('body').click(function(e) {

            var clickedOnCanvas = e.target.id == "canvas" || $(e.target).parents('#canvas').length ? true : false;
            var alreadyTextArea = $('textarea.textarea_editable')[0];

            if(clickedOnCanvas) {
                if(alreadyTextArea) {
                    drawSentence();
                } else {
                    createTextArea(e);
                }
            }
        });

        $('#text > div > .color_choice').click(function() {
            var textColor = $(this).css('background-color');
            $('.textarea_editable').css('color', textColor);
        });

        $('#text > div > div:not(".color_choice")').click(function() {
            var textSize = $(this).css('font-size');
            $('.textarea_editable').css('font-size', textSize);
            $('canvas').attr('data-textSize', textSize);
        });
    } else {
        return false;
    }
}

Upvotes: 0

Views: 161

Answers (1)

Zach
Zach

Reputation: 1964

Use unbind to remove a bound function such as click

See this fiddle https://jsfiddle.net/jc4wzerf/1/

The key line is:

$('.body-text').unbind( "click" )

In your case, you would use:

$('body').unbind( "click" )

EDIT

My fault, unbind is deprecated in 3.0. As an alternative, you can just use off as suggested by charlietfl

https://jsfiddle.net/jc4wzerf/3/

$('body').off( "click" )

or

Just use a flag and single handler

https://jsfiddle.net/jc4wzerf/2

Upvotes: 1

Related Questions