js中removeEventListener()移除不了綁定事件。

removeEventListener()移除不了綁定事件。 代碼如下 點(diǎn)擊一個按鈕，先移除事件再綁定事件，可是移除事件不好使。

$(document).on("click", ".pencil", function () {
    draw_graph('pencil', this);
});
$(document).on("click", ".drawLine", function () {
    draw_graph('line', this);
});
$(document).on("click", ".square", function () {
    draw_graph('square', this);
});
$(document).on("click", ".circle", function () {
    draw_graph('circle', this);
});

//畫布
var canvas ;
var context ;
//蒙版
var canvas_bak;
var context_bak;

var canvasWidth = 960;
var canvasHeight = 580;

var canvasTop;
var canvasLeft;

//畫筆大小
var size = 1;
var color  = '#000000';

// 畫筆類型
var graphType = '';


var draw_graph = function(graphType,obj){
    canvas_bak = document.getElementById("canvas_bak");
    console.log(graphType)
    graphType = graphType;
    //把蒙版放于畫板上面
    $("#canvas_bak").css("z-index",1);
    //先畫在蒙版上 再復(fù)制到畫布上
        
    chooseImg(obj);            
    var canDraw = false;    
    
    var startX;
    var startY;

    //鼠標(biāo)按下獲取 開始xy開始畫圖
    var mousedown = function(e){
        // 如果繪畫視圖是小窗口  那就禁止繪畫
        if($(".canvas_container_box").hasClass("small_box")) {
            return false;
        }
        //console.log(e);
        scroolTop = $(window).scrollTop();
        scroolLeft = $(window).scrollLeft();
        canvasTop = $(canvas).offset().top - scroolTop;
        canvasLeft = $(canvas).offset().left - scroolLeft;

        context.strokeStyle= color;
        context_bak.strokeStyle= color;
        context_bak.lineWidth = size;
        
        startX = 0;
        startY = 0;
        if (e.touches !== undefined && e.touches.length == 1 ) {
            startX = event.touches[ 0 ].pageX;
            startY = event.touches[ 0 ].pageY;
        } else {
            startX = e.clientX;
            startY = e.clientY;
        }
        
        startX = startX - canvasLeft;
        startY = startY - canvasTop;
        context_bak.moveTo(startX ,startY );
        canDraw = true;
        
        if(graphType == 'pencil'){
            context_bak.beginPath();
        }else if(graphType == 'circle'){
            context.beginPath();
            context.moveTo(startX ,startY );
            context.lineTo(startX +1 ,startY+1);
            context.stroke();    
            
        }else if(graphType == 'rubber'){                            
            context.clearRect(startX - size * 10 ,  startY - size * 10 , size * 20 , size * 20);                
        }    
        // 阻止點(diǎn)擊時的cursor的變化，draw
        e=e||window.event;
        e.preventDefault();
    };    

    //鼠標(biāo)離開 把蒙版canvas的圖片生成到canvas中
    var mouseup = function(e){
        // 如果繪畫視圖是小窗口  那就禁止繪畫
        if($(".canvas_container_box").hasClass("small_box")) {
            return false;
        }
        //console.log("mouseup");
        e=e||window.event;
        canDraw = false;
        var image = new Image();
        if(graphType!='rubber'){        
            image.src = canvas_bak.toDataURL();
            image.onload = function(){
                context.drawImage(image , 0 ,0 , image.width , image.height , 0 ,0 , canvasWidth , canvasHeight);
                clearContext();
                saveImageToAry();
            }
        } else {
            rubberFinish();
        }
    };

    //選擇功能按鈕 修改樣式
    function chooseImg(obj){
        var imgAry  = $(".draw_controller li");
        for(var i=0;i<imgAry.length;i++){
            $(imgAry[i]).removeClass('active');
            $(imgAry[i]).addClass('normal');                
        }
        $(obj).removeClass("normal");
        $(obj).addClass("active");
    }

    // 鼠標(biāo)移動
    var  mousemove = function(e){
        console.log(graphType)
        // 如果繪畫視圖是小窗口  那就禁止繪畫
        if($(".canvas_container_box").hasClass("small_box")) {
            return false;
        }
        //console.log(e);
        scroolTop = $(window).scrollTop();
        scroolLeft = $(window).scrollLeft();
        canvasTop = $(canvas).offset().top - scroolTop;
        canvasLeft = $(canvas).offset().left - scroolLeft;
        e=e||window.event;
        var x = y = 0;
        if (e.touches !== undefined && e.touches.length == 1 ) {
            x = event.touches[ 0 ].pageX;
            y = event.touches[ 0 ].pageY;
        } else {
            x = e.clientX;
            y = e.clientY;
        }
        x = x - canvasLeft;
        y = y - canvasTop;
        
        
        //方塊  4條直線搞定
        if(graphType == 'square'){
            if(canDraw){
                //console.log(x, y, startX, startY);
                context_bak.beginPath();
                clearContext();
                context_bak.moveTo(startX , startY);                        
                context_bak.lineTo(x  ,startY );
                context_bak.lineTo(x  ,y );
                context_bak.lineTo(startX  ,y );
                context_bak.lineTo(startX  ,startY );
                context_bak.stroke();
            }
        //直線
        }else if(graphType =='line'){                        
            if(canDraw){
                context_bak.beginPath();
                clearContext();
                context_bak.moveTo(startX , startY);
                context_bak.lineTo(x  ,y );
                context_bak.stroke();
            }
        //畫筆
        }else if(graphType == 'pencil'){
            if(canDraw){
                context_bak.lineTo(x ,y);
                context_bak.stroke();                        
            }
        //圓 未畫得時候 出現(xiàn)一個小圓
        }else if(graphType == 'circle'){                        
            clearContext();
            if(canDraw){
                // 鼠標(biāo)點(diǎn)擊移動時產(chǎn)生的圓
                context_bak.beginPath();            
                var radii = Math.sqrt((startX - x) *  (startX - x)  + (startY - y) * (startY - y));
                context_bak.arc(startX,startY,radii,0,Math.PI * 2,false);                                    
                context_bak.stroke();
            }else{    
                context_bak.beginPath();                    
                context_bak.arc(x,y,20,0,Math.PI * 2,false);
                context_bak.stroke();
            }
        //涂鴉 未畫得時候 出現(xiàn)一個小圓
        }else if(graphType == 'handwriting'){                                            
            if(canDraw){
                // 鼠標(biāo)點(diǎn)擊移動產(chǎn)生的圓圈
                context_bak.beginPath();    
                context_bak.strokeStyle = color;
                context_bak.fillStyle  = color;
                context_bak.arc(x,y,size*5,0,Math.PI * 2,false);    
                context_bak.fill();
                context_bak.stroke();
                context_bak.restore();
            }else{    
                clearContext();
                context_bak.beginPath();        
                context_bak.strokeStyle = color;            
                context_bak.fillStyle  = color;
                context_bak.arc(x,y,size*5,0,Math.PI * 2,false);
                context_bak.fill();
                context_bak.stroke();
            }
        }
    };

    canvas_bak.removeEventListener("touchstart", mousedown);
    canvas_bak.removeEventListener("touchmove", mousemove);
    canvas_bak.removeEventListener("touchend", mouseup);
    canvas_bak.addEventListener("touchstart", mousedown);
    canvas_bak.addEventListener('touchmove',mousemove);
    canvas_bak.addEventListener('touchend',mouseup);
}