React — удалить прослушиватель событий (onmousedown -> onmousemove)

У меня есть элемент, который можно растянуть - когда я перетаскиваю .leftMove, он меняет левую позицию и ширину родителя, а когда перетаскиваю .rightMove, он меняет ширину родителя.

Проблема в том, что я не могу удалить прослушиватель событий на mouseUp. Он все еще там, мне удается удалить событие при втором наведении мыши, но все же огромная проблема заключается в том, что элемент случайно меняет размер при первом наведении мыши.

return (
        <Fragment>
            <div className="leftMove" 
                onMouseDown={mouseDownLeft} 
                onMouseUp={MouseUp} 
                onMouseLeave={MouseUp}></div>
            <div className="rightMove"  
                onMouseDown={mouseDownRight} 
                onMouseUp={MouseUp} 
                onMouseLeave={MouseUp}>
            </div>
        </Fragment>)

const resize = (e) => {
        
        ...change width and position left...
        let thisone = e.target;
        thisone.removeEventListener("mousemove", resize, false);
        
        thisone.onmouseup = function() {
            console.log('removed');
            thisone.removeEventListener("mousemove", resize, false); 
        };

        thisone.onmouseleave = function() {
            console.log('removed by leave');
            thisone.removeEventListener("mousemove", resize, false); //working on leave and comeback second time
            thisone.removeEventListener("onmousedown", resize, false); 
        };
    };


const MouseUp = (e) => {
      
        e.target.removeEventListener("mousemove", resize, false); //not working at all

        //update global state, it's update elements I am changing width, leftpos

        setState(prevsetState => ({
            ...prevsetState,
            fromSetting: {
                ...prevsetState.fromSetting,
                mods: filteredDataSource
            }
        }));
  

    }

const mouseDownLeft = (e) => {
        //determining left right move
    
        e.target.addEventListener("mousemove", resize, false);
      
    }

reactjs onmousemove removeeventlistener onmousedown
person monter    schedule 07.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это моя ошибка. Я слушаю родительский элемент и пытаюсь изменить его размер дочерним элементом, а затем удалить прослушиватель событий из дочернего (но он слушал родителя)

const mouseDownRight = (e) => {

        console.log('downright');

        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();

        //let grabbing = e.target.closest('.elementtoresize'); <-mistake

        let grabbing = e.target; // right element to listen to

        m_pos = e.clientX;

        exDirect = -1;
        grabbing.addEventListener("mousemove", resize, false);
      
    }
person monter    schedule 15.01.2021