如果屏幕上有多个监视器和任何大小的窗口，则获得正确的 onClick 位置坐标

问题描述

有一个页脚组件，它重新渲染一个表示某些源的进度和完成百分比的条
有一个名为 useBar 的 onClick 钩子，进度条会快进或快退到点击进度条的位置。

问题是它并非在所有情况下都有效，它仅在浏览器窗口最大化时有效。如果通过拖动角落调整浏览器窗口大小或浏览器窗口位于显示器的某些区域时，则不起作用
它也需要在多显示器的情况下正常工作，如果有相对于视口/当前窗口的辅助桌面显示器

const barCallBack = useBar;
...
<div className={style.BarContainer}>
    <div>{millisToMinutesAndSeconds(time)}</div>
    <div
    className={style.Wrapper}
    onClick={(event) => barCallBack(event,timeRef,setProgress)}
    ref={timeRef}
    >
    <div className={style.Bar}>
        <div
        className={style.Progress}
        style={{ transform: `translateX(-${100 - progress}%)` }}
        />
    </div>
    <button style={{ left: `${progress}%` }} />
    </div>
    <div>{millisToMinutesAndSeconds(song.duration_ms)}</div>
</div>

  export const useBar = (event,elmRef,callback) => {
    if (elmRef.current) {
      const right = elmRef.current.getBoundingClientRect().right;
      const left = elmRef.current.getBoundingClientRect().left;

      const { screen } = window;
      const { availLeft,availTop } = screen;
      const hostScreenX=event.screenX-availLeft+ (availLeft ? (screen.width - screen.availWidth) : 0);
      const pos = hostScreenX; //stopped using event.screenX to make it work on secondary monitors
  
      const scale = right - left;
      const input = pos - left;
      const percent = Math.round((input * 100) / scale);
  
      callback(percent);
    }
  };

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）