getCursorLeft(e) {
const event = e.changedTouches ? e.changedTouches[0] : e;
//这行代码首先检查e.changedTouches是否存在,这是为了区分触摸事件(如移动设备)与鼠标事件(如桌面设备)。如果e.changedTouches存在,表示当前是一个触摸事件,因此event被赋予e.changedTouches[0],即首个触摸点。若不存在,直接使用e作为事件对象。
const { left, width } = this.container.getBoundingClientRect();
//使用getBoundingClientRect方法获取当前组件容器的left位置和width宽度。left代表容器左边缘相对于视口的水平位置,width是容器的宽度。
const sliderButtonWidthPercent = (this.slider.getBoundingClientRect().width + 4) * 100 / width;
//获取滑块按钮的宽度,并且稍微增加了一个固定值4(可能是为了考虑边缘的留白、边框或其他视觉效果),然后计算它相对于容器宽度的百分比占比。
const min = sliderButtonWidthPercent / 2;
const max = 100 - min;
//基于滑块按钮的宽度比例,计算出滑块可以移动的最小和最大百分比值。这确保滑块不会超出容器的边界。
const delta = event.pageX - left;
let percent = (delta / width) * 100;
//这里,event.pageX获取光标相对于文档(页面)左侧的位置。从这个值中减去容器的left值,可以得到光标在容器内的相对位置delta。再将这个相对位置转换为容器宽度的百分比(percent)。
if (percent < min) percent = min;
if (percent > max) percent = max;
return percent
}
}