点击更新进度条位置

zlzbt

已于 2024-05-30 09:31:34 修改

阅读量142

点赞数

分类专栏： Javascript React 文章标签： JavaScript 事件处理 DOM操作时间轴鼠标交互

于 2022-09-15 15:59:32 首次发布

本文链接：https://blog.csdn.net/zlzbt/article/details/126873463

版权

Javascript 同时被 2 个专栏收录

44 篇文章 2 订阅

订阅专栏

React

20 篇文章 0 订阅

订阅专栏

<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);
  };