起動後に機能を無効にする方法

Question

特定のクリックイベントで機能を有効にできますが、他のdivでクリックイベントを行うたびにその機能を停止したいと考えています。

これは、これまでのところ、私の関数である：私は＃のテキスト]タブをクリックしたとき

$('#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; 
    } 
} 

あなたが見ることができるように、私はこれは完全に働いている、「真」に私の機能を置きます。しかし、＃paint-tab、＃sticker-tabまたは＃done-tabをクリックしても、console.log（ '動作を停止する'）が表示されていても機能は動作しています。

EDIT：

私はグローバル変数を置くが、今、私の機能は、私は＃のテキスト]タブをクリックし、グローバル変数が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; 
    } 
} 

Answer 1

使用unbindキーラインがある。このフィドルにhttps://jsfiddle.net/jc4wzerf/1/

を参照してください、このようなclick

としてバインドされた機能を削除するには：お使いの場合には

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

、あなたが使用します。

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

EDIT

私の障害は、unbindは3.0で廃止されました。 charlietflにより示唆されるように別の方法として、あなただけのoffを使用することができます

ちょうどフラグと単一のハンドラを使用し

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

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

または

https://jsfiddle.net/jc4wzerf/2