无标题点击更新进度条位置

Posted 2022-09-20 zlzbt

<div onMouseDown=changePosition ref=playBackSignRef className=styles.playBackSign>
        <span ref=showCurTimeSpanRef className=styles.showCurTime>
          _L.isEmpty(timeFrame) ? '' : formatDate2String(curTimer)
        </span>
      </div>

const changePosition = (event: any) => 
    if (_L.isEmpty(timeFrame)) return;
    const offsetWidth = window.innerWidth;
    const stop = event.currentTarget;
    const  offsetLeft  = stop;
    stop.style.left = offsetLeft + 'px';
    const  pageX: start  = event;
    const move = (e: MouseEvent) => 
      setIsMoveFn(true);
      let val = offsetLeft + e.pageX - start;
      if (val <= 0) val = 0;
      if (val >= offsetWidth) val = offsetWidth;
      stop.style.left = val === 0 ? val + 'px' : val - 8 + 'px';
      setPercentFn((val / offsetWidth) * 100);
      setNewCurTimeFn((val / offsetWidth) * timeDifferenceSecond * baseSecond);
    ;
    const clear = () => 
      setIsMoveFn(false);
      document.removeEventListener('mousemove', move);
      document.removeEventListener('mouseup', clear);
      // document.removeEventListener('mouseleave', clear);
    ;
    document.addEventListener('mousemove', move);
    document.addEventListener('mouseup', clear);
    // document.addEventListener('mouseleave', clear);
  ;