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

removeEventListener()移除不了绑定事件。代码如下点击一个按钮，先移除事件再绑定事件，可是移除事件不好使。

$(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);
    //先画在蒙版上 再复制到画布上
        
    chooseImg(obj);            
    var canDraw = false;    
    
    var startX;
    var startY;

    //鼠标按下获取 开始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);                
        }    
        // 阻止点击时的cursor的变化，draw
        e=e||window.event;
        e.preventDefault();
    };    

    //鼠标离开 把蒙版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");
    }

    // 鼠标移动
    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();                        
            }
        //圆 未画得时候 出现一个小圆
        }else if(graphType == 'circle'){                        
            clearContext();
            if(canDraw){
                // 鼠标点击移动时产生的圆
                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();
            }
        //涂鸦 未画得时候 出现一个小圆
        }else if(graphType == 'handwriting'){                                            
            if(canDraw){
                // 鼠标点击移动产生的圆圈
                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);
}

先说原因是局部变量和方法覆盖的问题
draw_graph是一个函数在函数内定义变量或方法都是局部的
下面这样如果放到全局没有问题但是放到函数内就有问题啊

var btnclick = function(){//如果放在函数中 每次进入函数之后这个方法重新声明赋值
        console.log("click")
};
//因为btnclick这个方法重新声明赋值了所以这里的btnclick，是一个全新，并不是你上一次点击事件的btnclick
document.getElementById("btn").removeEventListener("click",btnclick);
document.getElementById("btn").addEventListener("click",btnclick);

原因就是当前remove的事件是一个全新的函数并不是之前add的函数
解决：

var k = null;
//通过函数返回值将上一次的函数以参数的方式再重新传入函数
draw_graph(k);
function draw_graph(k){
      var btnclick = function(){
        console.log("click")
    };
    if(k){//这时候 这个k就是上一次add的函数 并没有被覆盖掉
        document.getElementById("btn").removeEventListener("click",k);
    }
    document.getElementById("btn").addEventListener("click",btnclick);
    return btnclick;
}

上面只是举个例子为什么会这样既然你用了jquery就有更简单的方法

function draw_graph(){
      var btnclick = function(){
        console.log("click")
    };
    $("#btn2").off("click").on("click",btnclick);//jquery一行就解决了
}

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

前端代码更新如何通知用户刷新页面？

如何解决浏览器清除缓存导致axios请求404？

chrome控制台的$不是jquery ?

如何实现一个深拷贝函数？

求一个可以自定义排期的日历，类似于钉钉日历？

后端返回JSON编码后的数据，在前端axios接受之后，就是转为了JavaScript对应的对象是吗？