Create Shape / Drag and Drop - event-handling

Question

I'm trying to work with a createjs canvas to add new states (circles) on empty spots of stage on click, but drag existing points on click. I'm assuming the problem is that when I try to remove the stagemousemove event in handleMove it doesn't properly remove since it doesn't have a dedicated static handler, but I'm not sure how I'd even create that handler.
// create new state (circle)
function createState(e) {
x = e.stageX
y = e.stageY
if (stage.children.every(el =>
!(el.hitTest(x, y)) &&
!(el.hitTest(x + 30, y + 30)) &&
!(el.hitTest(x + 30, y - 30)) &&
!(el.hitTest(x - 30, y + 30)) &&
!(el.hitTest(x - 30, y - 30))
)) {
state = new createjs.Shape()
state.graphics.ss(3)
.s('#777')
.f('#eaeaea')
.dc(x, y, 30)
stage.addChild(state)
state.on('mousedown', handleMove)
stage.update()
}
}
// drag and drop
function handleMove(e) {
el = stage.getObjectUnderPoint(stage.mouseX, stage.mouseY);
var offset = {
x: el.x - e.stageX,
y: el.y - e.stageY
}
stage.on('stagemousemove', (evt) => {
el.x = offset.x + evt.stageX
el.y = offset.y + evt.stageY
stage.update()
})
stage.on('stagemouseup', (e) => {
stage.off('stagemousemove', (evt) => {
el.x = offset.x + evt.stageX
el.y = offset.y + evt.stageY
stage.update()
})
})
}
// determines whether to create new point
function handler(e) {
if (stage.getObjectUnderPoint(stage.mouseX, stage.mouseY) == null)
createState(e)
}
stage.on('stagemousedown', handler)

Answer 1

When you use the off() method, you must pass a reference to the result of the on() call.
let listener = stage.on('stagemousemove', (evt) => {
el.x = offset.x + evt.stageX
el.y = offset.y + evt.stageY
stage.update()
});
stage.on('stagemouseup', (e) => {
stage.off('stagemousemove', listener);
});
The on method creates a function closure for you automatically to maintain scope, which ES5 JavaScript does not do. This lets you pass a scope parameter to on so this is the expected scope.
When using arrow functions, this closure happens during ES5 transpiling. You can not just pass a similar function to the off, since they are not equal.
Hope that helps!