Реагируйте на события мыши, удаляйте обработчик событий

#reactjs #canvas #draggable

Вопрос:

(Я программирую это с помощью react) У меня есть три события мыши: OnMouseDown при нажатии на кнопку OnMouseMove при перемещении мыши, OnMouseUp при отпускании щелчка

Теперь я добавил прослушиватель событий в OnMouseDown, чтобы OnMouseMove запускался только при щелчке мыши. Но я хочу удалить прослушиватель событий и остановить OnMouseMove после вызова события OnMouseUp.

Я добавил removeEventListener, но событие handleOnMouseMove все еще выполняется.

Я неправильно реализовал removeEventListener?

 const handleOnMouseDown = (e) =>{
        const offsetX = e.nativeEvent.offsetX;
        const offsetY = e.nativeEvent.offsetY;
       
        if ( (offsetX > xAxis) amp;amp; (offsetX < (xAxis   lengthText)) amp;amp; (offsetY > (yAxis - fontSize)) amp;amp; (offsetY < (yAxis   fontSize))
            ) {
            setDraggable(true);
            document.addEventListener('mousemove', (e) => handleOnMouseMove(e,offsetX, offsetY))

            
        }
        
    }
   
    
    const handleOnMouseMove = (e, offsetX, offsetY) =>{ 
        console.log('moi')
        

       if ( {topText}) {
            
            setxAxis(offsetX);
            setyAxis(offsetY);
            setDraggable(false)
       }
  
        
    }
    
    const hanldeOnMouseUp = (e) => {
        setDraggable(false);
        document.removeEventListener('mousemove', handleOnMouseMove);
        
        
    }