canvas使用addEventListener监听鼠标事件后，再使用removeEventListener解绑事件无效

最新推荐文章于 2023-10-26 16:32:19 发布

宁长风

最新推荐文章于 2023-10-26 16:32:19 发布

阅读量880

点赞数

分类专栏：问题专栏bug 文章标签： canvas

本文链接：https://blog.csdn.net/weixin_43663775/article/details/125430091

版权

问题专栏bug 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

记录这个奇怪的问题，有知道的大佬还望指教。


    
    mousedown(tt){
        // this.c.removeEventListener('mousemove', this.lineation.bind(this));
        if(!this._auxiliary)return;
        this._mouseSwitch = true;
        this.start = {
            x: tt.offsetX,
            y: tt.offsetY
        }
    }

    mousemove(tt){
        if(this._mouseSwitch && this._auxiliary){
            console.log('27777777777777');
            this._ctx.clearRect(0, 0, this.c.width, this.c.height);
            this._ctx.beginPath();
            this._ctx.fillStyle = 'rgba(255,0,0,0.2)';
            this._ctx.fillRect(this.start.x, this.start.y, tt.offsetX - this.start.x, tt.offsetY - this.start.y);
            this._ctx.strokeStyle="rgba(0,0,0,0.1)";
            this._ctx.rect(this.start.x, this.start.y, tt.offsetX - this.start.x, tt.offsetY - this.start.y);
            this._ctx.stroke();
            // console.log(this.start.x, this.start.y, tt.offsetX - this.start.x, tt.offsetY - this.start.y);
            for(let i = 0; i < this.mouseData.length; i++){
                let obj = this.mouseData[i];
                this._ctx.beginPath();
                // this._ctx.fillStyle = 'rgba(255,0,0,0.2)';
                this._ctx.fillRect(obj.x, obj.y, obj.w, obj.l);
                this._ctx.rect(obj.x, obj.y, obj.w, obj.l);
                this._ctx.stroke();
            }
        }
    }

    mouseup(tt){
        if(this._mouseSwitch && this._auxiliary){
            this._mouseSwitch = false;
            this._auxiliary = false;
            this.mouseData.push({
                x:this.start.x, 
                y:this.start.y,
                w:tt.offsetX - this.start.x,
                l:tt.offsetY - this.start.y
            })
            this.option.markData(this.mouseData)
            console.log(this.c.removeEventListener);
        }
    }

    markRect(){
        this._auxiliary = true;
        console.log(this.c.addEventListener);
        this.c.addEventListener('mousedown', this.mousedown.bind(this));
        this.c.addEventListener('mousemove', this.mousemove.bind(this));
        this.c.addEventListener('mouseup', this.mouseup.bind(this));
    }