根据Azametzin的回答，我将处理触摸和非触摸设备偏移的方法重构为：
我有一个自定义的范围滑块。
然而，我遇到的问题是，我无法滑动自定义的"拇指"(在本例中🔥)在触摸设备上工作。
以下是项目实况：https://wagon-city-guides.herokuapp.com/spots/32
如果你在手机上检查它(我用的是iPhone(，你仍然会看到原始拇指的边框(我现在是故意留下的(，它可以滑动并工作，但火焰(自定义拇指(不会出现……而它对点击设备很好。
我正在寻找一个香草JS解决方案。🙏🏽
这是我的代码：
class RatingSlider {
constructor() {
this.ratingSliderForm = document.querySelector(".js-rating-slider-form");
this.ratingSliderInput = document.querySelector(".js-rating-slider-input");
this.ratingSliderThumb = document.querySelector(".js-rating-slider-thumb");
this.ratingSliderValue = document.querySelector(".js-rating-slider-value");
this.ratingSliderIcon = document.querySelector(".js-rating-slider-icon");
this.isPressed = false;
this.moveEvent;
this.holdEvent;
this.releaseEvent;
this.bind();
}
handleSliding(event) {
if (!this.isPressed) {
return;
}
if (
event.offsetX > 0 &&
event.offsetX < this.ratingSliderInput.offsetWidth
) {
this.ratingSliderThumb.style.left = `${event.offsetX - 10}px`;
this.ratingSliderIcon.style.transform = `scale(${1 +
this.ratingSliderInput.value / 150})`;
this.ratingSliderValue.innerText = `${this.ratingSliderInput.value}°`;
}
}
setRating() {
this.ratingSliderThumb.style.left = `${(this.ratingSliderInput.offsetWidth /
100) *
this.ratingSliderInput.value -
10}px`;
this.ratingSliderIcon.style.transform = `scale(${1 +
this.ratingSliderInput.value / 150})`;
this.ratingSliderValue.innerText = `${this.ratingSliderInput.value}°`;
this.ratingSliderInput.addEventListener(
`${this.holdEvent}`,
() => (this.isPressed = true)
);
this.ratingSliderInput.addEventListener(`${this.releaseEvent}`, () => {
this.isPressed = false;
this.ratingSliderForm.submit();
});
}
setEvents() {
if ("ontouchstart" in document.documentElement) {
this.moveEvent = "touchmove";
this.holdEvent = "touchstart";
this.releaseEvent = "touchend";
} else {
this.moveEvent = "mousemove";
this.holdEvent = "mousedown";
this.releaseEvent = "mouseup";
}
}
bind() {
if (!this.ratingSliderForm) {
return;
}
this.setEvents();
this.setRating();
this.ratingSliderInput.addEventListener(`${this.moveEvent}`, event =>
this.handleSliding(event)
);
}
}
export default RatingSlider;
问题是触摸事件没有offsetX和offsetY属性。它们的值在移动设备中返回undefined。因此，您需要将这些添加到事件中。
在handleSliding(event)方法的开头添加以下内容：
if ("ontouchstart" in document.documentElement) {
event = addOffsetsOnTouch(event);
}
function addOffsetsOnTouch(e) {
let touch = e.touches[0] || event.changedTouches[0];
let target = document.elementFromPoint(touch.clientX, touch.clientY);
event.offsetX = touch.clientX - target.getBoundingClientRect().x;
event.offsetY = touch.clientY - target.getBoundingClientRect().y
return e;
}
handleOffsetOnChange(event) {
if ("ontouchstart" in document.documentElement) {
let touch = event.touches[0];
let target = this.ratingSliderInput;
event.offsetX = touch.clientX - target.getBoundingClientRect().x;
}
if (
event.offsetX > 0 &&
event.offsetX < this.ratingSliderInput.offsetWidth
) {
this.ratingSliderThumb.style.left = `${event.offsetX - 10}px`;
}
}
这是整个文件：
class RatingSlider {
constructor() {
this.ratingSliderForm = document.querySelector(".js-rating-slider-form");
this.ratingSliderInput = document.querySelector(".js-rating-slider-input");
this.ratingSliderThumb = document.querySelector(".js-rating-slider-thumb");
this.ratingSliderValue = document.querySelector(".js-rating-slider-value");
this.ratingSliderIcon = document.querySelector(".js-rating-slider-icon");
this.isPressed = false;
this.setEvents();
this.setPositionThumb();
this.setThumbStyle();
this.bind();
}
setEvents() {
this.moveEvent;
this.startEvent;
this.endEvent;
if ("ontouchstart" in document.documentElement) {
this.moveEvent = "touchmove";
this.startEvent = "touchstart";
this.endEvent = "touchend";
} else {
this.moveEvent = "mousemove";
this.startEvent = "mousedown";
this.endEvent = "mouseup";
}
}
setThumbStyle() {
this.ratingSliderIcon.style.transform = `scale(${1 +
this.ratingSliderInput.value / 150})`;
this.ratingSliderValue.innerText = `${this.ratingSliderInput.value}°`;
}
setPositionThumb() {
this.ratingSliderThumb.style.left = `${(this.ratingSliderInput.offsetWidth /
100) *
this.ratingSliderInput.value -
10}px`;
}
handleOffsetOnChange(event) {
if ("ontouchstart" in document.documentElement) {
let touch = event.touches[0];
let target = this.ratingSliderInput;
event.offsetX = touch.clientX - target.getBoundingClientRect().x;
}
if (
event.offsetX > 0 &&
event.offsetX < this.ratingSliderInput.offsetWidth
) {
this.ratingSliderThumb.style.left = `${event.offsetX - 10}px`;
}
}
bind() {
if (!this.ratingSliderForm) {
return;
}
window.addEventListener("resize", () => this.setPositionThumb());
this.ratingSliderInput.addEventListener(
this.startEvent,
() => (this.isPressed = true)
);
this.ratingSliderInput.addEventListener(this.endEvent, () => {
this.isPressed = false;
this.ratingSliderForm.submit();
});
this.ratingSliderInput.addEventListener(this.moveEvent, (event) => {
if (!this.isPressed) {
return;
}
this.handleOffsetOnChange(event);
this.setThumbStyle();
});
}
}
export default RatingSlider;