Невозможно удалить прослушиватель событий
Я пытаюсь добавить событие перемещения мыши при наведении мыши и удалить его при наведении курсора мыши, оно добавляет событие перемещения, но не удаляется. Он успешно запускает событие mouseup, но не удаляет перемещение мыши.
zoomDiv.addEventListener("mousedown", ()=>{
console.info("mousedown");
zoomDiv.addEventListener("mousemove", e => mouseDown(e))
})
zoomDiv.addEventListener("mouseup", ()=>{
console.info("mouseup")
zoomDiv.removeEventListener("mousemove", e => mouseDown(e))
})
Я пытаюсь добавить событие перемещения мыши при наведении курсора мыши и удалить его при наведении курсора мыши, оно добавляет событие перемещения, но не удаляет его. Он успешно запускает событие mouseup, но не удаляет перемещение мыши.
Похоже на проблему X/Y
Вместо того, чтобы добавлять и удалять эти обработчики перемещения мыши (и, предположительно, продолжать это делать?), вероятно, было бы разумнее оставить обработчик перемещения мыши на месте, а затем просто определять, была ли нажата кнопка, внутри функции обработчика. Обработчик mousemove получает переданный экземпляр MouseEvent, который имеет такие свойства, как button/buttons, которые помогут вам это определить.
Похоже, вы действительно хотите перетаскивать события - Перетаскивать API
Я действительно не знал о событиях перетаскивания, спасибо
@samet Пожалуйста, поделитесь своим решением или удалите вопрос.
Я использовал способ @Magmatic для решения проблемы и выбрал его в качестве принятого ответа.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Технически функция, которую вы пытаетесь удалить, — это другая функция. Вместо этого вам нужно присвоить вашей функции переменную, а затем удалить эту же переменную, примерно так: (непроверено)
let mouseMoveFunction = (e) => {
console.info("mouseMoveFunction");
mouseDownFunction(e)
}
let mouseDownFunction = (e) => {
console.info("mouseDownFunction");
zoomDiv.addEventListener("mousemove", mouseMoveFunction)
}
let mouseUpFunction = (e) => {
console.info("mouseUpFunction")
zoomDiv.removeEventListener("mousemove", mouseMoveFunction)
}
zoomDiv.addEventListener("mousedown", mouseDownFunction)
zoomDiv.addEventListener("mouseup", mouseUpFunction)
Кроме того, имейте в виду, что после того, как мышь опущена и движется, каждый пиксель, который она перемещает, добавляет еще один прослушиватель событий, который вызывает себя для добавления еще одного прослушивателя. Это экспоненциальный рост, и довольно скоро к нему добавятся сотни или тысячи слушателей. Но это может немного выходить за рамки вашего первоначального вопроса.
Вам необходимо предоставить
removeEventListenerту же ссылку на функцию, которую вы использовали при добавлении прослушивателя. Вы используетеe => mouseDown(e)в двух местах — это создаст функцию, которая каждый раз делает одно и то же, но это не будет одна и та же функция. Вам необходимо заранее создать функцию и сохранить ссылку на нее в переменную.