如何计算进度条 x 轴鼠标被点击的位置？

Question

我正在尝试计算用户点击进度条容器的百分比。即：如果他们在中间点击它应该通过“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>

它与单击的元素有关，因为我有两个子元素用于 elapsed 和 remainder 我认为鼠标事件为我提供了该元素的坐标，而不是我想要的 .progress 栏.

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

版本 1：https://codesandbox.io/s/op7prxq6z
版本 2：https://codesandbox.io/s/8265mqnr50

Answer 1

这很棘手。

我认为问题是 $event.offsetX 是基于点击的目标，它可以是经过的或剩余的部分，所以你必须根据目标和当前目标：

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

这为您提供了点击在父项中的偏移量，从而使您的百分比计算正确。

我更新的沙盒，虽然有点混乱：https://codesandbox.io/s/llnmj5x7lz

如何计算进度条 x 轴鼠标被点击的位置？

How to calculate where on progress bar x-axis mouse was clicked?

javascript

vue.js

mouseevent