title: End JavaScript function and all its content
body: <p>I have a function in JavaScript  that will run and wont stop once activated, i need a way of completely stopping this funcrtion and all of its content and events </p>
  
  <pre><code>line.addEventListener('click', function () {
     $(function(){
  
      var canvasOffset=$("#canvas").offset();
     var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
  window.alert(offsetX);
      var startX;
      var startY;
      var isDown=false;
     var canvas2 = $("#canvas");
  
  
  
      function drawLine(toX,toY,context){
          context.beginPath();
          context.moveTo(startX, startY);
          context.lineTo(toX,toY);
          context.stroke();
      }
  
      function handleMouseDown(e){
        e.preventDefault();
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);
  
        // save drag-startXY, 
        // move temp canvas over main canvas,
        // set dragging flag
        startX=mouseX;
        startY=mouseY;
        contextTemp.clearRect(0,0,canvasTemp.width,canvasTemp.height);
        $("#canvasTemp").css({ left:0, top:0 });
        isDown=true;
      }
  
      function handleMouseUp(e){
        e.preventDefault();
        if(!isDown){return;}
        // clear dragging flag
        // move temp canvas offscreen
        // draw the user's line on the main canvas
        isDown=false;
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);
  
        drawLine(mouseX,mouseY,context);
      }
  
      function handleMouseMove(e){
        e.preventDefault();        
        if(!isDown){return;}
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);
        // clear the temp canvas
        // on temp canvas draw a line from drag-start to mouseXY
        contextTemp.clearRect(0,0,canvasTemp.width,canvasTemp.height);
        drawLine(mouseX,mouseY,contextTemp);
      }
  
    canvas2.mousedown(function(e){handleMouseDown(e);});
      canvas2.mousemove(function(e){handleMouseMove(e);});
    canvas2.mouseup(function(e){handleMouseUp(e);});
   canvas2.mouseout(function(e){handleMouseUp(e);});
  
  
  }); // end $(function(){});
  });
  </code></pre>
  
  <p>This function needs to stop running on a variable click e.g a stop button</p>
  
  <p>but it cannot stop all the other functions running </p>