如何计算进度条 x 轴鼠标被点击的位置?
How to calculate where on progress bar x-axis mouse was clicked?
我正在尝试计算用户点击进度条容器的百分比。即:如果他们在中间点击它应该通过“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 });
},
这很棘手。
我认为问题是 $event.offsetX 是基于点击的目标,它可以是经过的或剩余的部分,所以你必须根据目标和当前目标:
const offsetX = $event.offsetX + $event.target.offsetLeft - $event.currentTarget.offsetLeft;
这为您提供了点击在父项中的偏移量,从而使您的百分比计算正确。
我更新的沙盒,虽然有点混乱:https://codesandbox.io/s/llnmj5x7lz
我正在尝试计算用户点击进度条容器的百分比。即:如果他们在中间点击它应该通过“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 });
},
这很棘手。
我认为问题是 $event.offsetX 是基于点击的目标,它可以是经过的或剩余的部分,所以你必须根据目标和当前目标:
const offsetX = $event.offsetX + $event.target.offsetLeft - $event.currentTarget.offsetLeft;
这为您提供了点击在父项中的偏移量,从而使您的百分比计算正确。
我更新的沙盒,虽然有点混乱:https://codesandbox.io/s/llnmj5x7lz