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

Question

有一个页脚组件，它重新呈现一个表示进度和完成百分比的条形一些源
有一个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);
    }
  };