Kevin Powell - Community•10mo ago

Problem in removing event listener

I am making a flow-chart maker and made a new class which will create a div element when the user selects (drags and drops mouse). Here's the code

import { el, css } from './utilities.js';

export default class MaketempDiv {
    constructor(x, y) {
        this.father = x;
        this.onstart();
        this.y = y;
    }
    exportFn(y = this.y) {
        document.removeEventListener('mousemove', this.dragfn);
        document.removeEventListener('mouseup', this.exportFn);

        this.exportedDiv = this.temp;
        this.temp.parentElement.removeChild(this.temp);
        this.temp = null;
    }
    dragfn = (e) => {
        css(this.temp, {
            width: `${e.clientX - this.initPos[0]}px`,
            height: `${e.clientY - this.initPos[1]}px`
        });
    }
    onstart(y) {
        this.father.addEventListener('mousedown', (e) => {
            this.temp = el('div', this.father, ['class', 'tempo']);
            this.initPos = [e.clientX, e.clientY];
            css(this.temp, {
                left: `${this.initPos[0] - document.querySelector('.tskbr').clientWidth}px`,
                top: `${this.initPos[1] + this.father.parentElement.scrollTop}px`
            });

            document.addEventListener('mousemove', this.dragfn);
            document.addEventListener('mouseup', this.exportFn);
        }, false);
    }
}

import { el, css } from './utilities.js';

export default class MaketempDiv {
    constructor(x, y) {
        this.father = x;
        this.onstart();
        this.y = y;
    }
    exportFn(y = this.y) {
        document.removeEventListener('mousemove', this.dragfn);
        document.removeEventListener('mouseup', this.exportFn);

        this.exportedDiv = this.temp;
        this.temp.parentElement.removeChild(this.temp);
        this.temp = null;
    }
    dragfn = (e) => {
        css(this.temp, {
            width: `${e.clientX - this.initPos[0]}px`,
            height: `${e.clientY - this.initPos[1]}px`
        });
    }
    onstart(y) {
        this.father.addEventListener('mousedown', (e) => {
            this.temp = el('div', this.father, ['class', 'tempo']);
            this.initPos = [e.clientX, e.clientY];
            css(this.temp, {
                left: `${this.initPos[0] - document.querySelector('.tskbr').clientWidth}px`,
                top: `${this.initPos[1] + this.father.parentElement.scrollTop}px`
            });

            document.addEventListener('mousemove', this.dragfn);
            document.addEventListener('mouseup', this.exportFn);
        }, false);
    }
}

the imported file is just used to make dom. I am having problem in the eventlistener part. When I used the traditional event it worked (

document.onmousemouse = ....

document.onmousemouse = ....

) but now i cant remove it.

4 Replies

CodeNascher•10mo ago

not 100% sure, but i believe you're having a this moment. exportFn doesn't exist on HTMLDocument

MEOP•10mo ago

Umm... That's not the issue, the mousemove event cannot be removed for some reason

Jochem•10mo ago

removeEventListener requires a reference to the original function. What they're saying is you might be having an issue with this referring to something else in tha addEventListener call than in the removeEventListener call also, protip, "Umm, that's not the issue" isn't a very polite way of speaking to someone who is trying to help you with a problem you're having

MEOP•10mo ago

Sorry for that

Gaming

Programming

Problem in removing event listener