Javascript 如何计算进度条上x轴鼠标单击的位置？

我试图计算用户点击进度条容器的百分比。Ie：如果他们在中间点击，它应该通过“50%”。但是随着进度条的改变，我得到了错误的结果

<template>
  <span class="progress"
        :style="{ width }"
        @click.prevent="onClickProgress($event)">
    <span class="elapsed" :style="{ width: completed }" ref="elapsed"></span>
    <span class="remainder" :style="{ width: remainder }"></span>
  </span>
</template>
<script>
export default {
  name: 'progress-bar',
  props: ['percent', 'width'],
  computed: {
    completed() {
      return `${this.percent}%`;
    },
    remainder() {
      return `${100 - this.percent}%`;
    },
  },
  methods: {
    onClickProgress($event) {
      // calculate where on progress bar click happened
      const width = $event.currentTarget.clientWidth;
      const elapsedWidth = this.$refs.elapsed.clientWidth;
      const offsetX =  elapsedWidth <  width ? elapsedWidth + $event.offsetX : $event.offsetX;
      const percent = Math.round((offsetX / width) * 100);


      this.$emit('onClickProgress', { percent });
    },
  },
};
</script>
<style lang="scss" scoped>
.progress {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 1rem;
  cursor: pointer;

  .elapsed {
    display: inline-block;
    height: .5rem;
    background: #E41C69;
  }

  .remainder {
    display: inline-block;
    height: .5rem;
    background: #000;
  }
}
</style>

• 第1版：
• 第2版：
这很棘手
我认为问题在于$event.offsetX是基于点击的目标的，点击的目标可以是经过的组件，也可以是剩余的组件，因此您必须根据与target和currentTarget的相对偏移量计算偏移量：

  const offsetX = $event.offsetX + $event.target.offsetLeft - $event.currentTarget.offsetLeft;

这将为您提供在父对象中单击的偏移量，从而使百分比计算正确

---

我更新的沙盒，虽然有点混乱：
您如何在父组件中调用该方法？我创建了这个方法，可以帮助其他人使用事件处理程序调试您的代码它使用的是：onClickProgress=“onClickProgress”@boussadjrahim我也尝试过这个版本，但是当你试图把音量调大的时候，有些地方不对劲。我想知道是否有更好的方法来完成进度条。我尝试只使用一个span，但是背景颜色有问题，所以我不得不添加

。余数
span
  const offsetX = $event.offsetX + $event.target.offsetLeft - $event.currentTarget.offsetLeft;