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

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

$(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);
    //先畫在蒙版上 再?gòu)?fù)制到畫布上
        
    chooseImg(obj);            
    var canDraw = false;    
    
    var startX;
    var startY;

    //鼠標(biāo)按下獲取 開(kāi)始xy開(kāi)始畫圖
    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)擊時(shí)的cursor的變化，draw
        e=e||window.event;
        e.preventDefault();
    };    

    //鼠標(biāo)離開(kāi) 把蒙版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)移動(dòng)
    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();                        
            }
        //圓 未畫得時(shí)候 出現(xiàn)一個(gè)小圓
        }else if(graphType == 'circle'){                        
            clearContext();
            if(canDraw){
                // 鼠標(biāo)點(diǎn)擊移動(dòng)時(shí)產(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();
            }
        //涂鴉 未畫得時(shí)候 出現(xiàn)一個(gè)小圓
        }else if(graphType == 'handwriting'){                                            
            if(canDraw){
                // 鼠標(biāo)點(diǎn)擊移動(dòng)產(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);
}

回答

編輯回答

心癌

addEventListener

2017年8月1日 22:54

編輯回答

尕筱澄

on()對(duì)應(yīng)off()，bind()對(duì)應(yīng)unbind()

2017年10月19日 22:32

編輯回答

兮顏

先說(shuō)原因是局部變量和方法覆蓋的問(wèn)題
draw_graph是一個(gè)函數(shù)在函數(shù)內(nèi)定義變量或方法都是局部的
下面這樣如果放到全局沒(méi)有問(wèn)題但是放到函數(shù)內(nèi)就有問(wèn)題啊

var btnclick = function(){//如果放在函數(shù)中 每次進(jìn)入函數(shù)之后這個(gè)方法重新聲明賦值
        console.log("click")
};
//因?yàn)閎tnclick這個(gè)方法重新聲明賦值了所以這里的btnclick，是一個(gè)全新，并不是你上一次點(diǎn)擊事件的btnclick
document.getElementById("btn").removeEventListener("click",btnclick);
document.getElementById("btn").addEventListener("click",btnclick);

原因就是當(dāng)前remove的事件是一個(gè)全新的函數(shù)并不是之前add的函數(shù)
解決：

var k = null;
//通過(guò)函數(shù)返回值將上一次的函數(shù)以參數(shù)的方式再重新傳入函數(shù)
draw_graph(k);
function draw_graph(k){
      var btnclick = function(){
        console.log("click")
    };
    if(k){//這時(shí)候 這個(gè)k就是上一次add的函數(shù) 并沒(méi)有被覆蓋掉
        document.getElementById("btn").removeEventListener("click",k);
    }
    document.getElementById("btn").addEventListener("click",btnclick);
    return btnclick;
}

上面只是舉個(gè)例子為什么會(huì)這樣既然你用了jquery就有更簡(jiǎn)單的方法

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

2017年1月29日 20:18