Reputation: 163
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
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