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
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 () but now i cant remove it.
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 = ....
