ngx滑块在移动设备上滚动时会意外触发角度

Question

所以我正在开发一个实现ngx滑块的调查应用程序。这个问题出现在移动设备上，人们向下滚动一排排滑动条问题，他们在滚动时无意中触发了滑动条，从而改变了答案。

我试过在(touchmove(事件中禁用它，它确实禁用了，但只是在更改滑块值之后。禁用它(触摸启动(不起作用。我尝试了touchEventsInterval滑块选项，但没有成功。也尝试了event.prventDefault((。没有雪茄。现在我正在尝试使用ElementRef访问它。从技术上讲，我可以将滑块设为只读，以某种方式注册一次点击和它的放置位置，然后将特定勾号的类更改为活动，但我真的很难实现这一点。我真的不确定这是否是个好主意/可行。

，我真的没什么主意了

这是html

<div class="slider-field hide-value-ticks mb-5">
<div class="subtitle-black mb-4">{{answer.rowAnswerText ?? ''}} {{answer.columnAnswerText}}</div>
<ngx-slider 
*ngIf="options" 
class="touch-slider" 
[value]="selectedAnswer" 
(valueChange)="sliderValueChange($event)" 
[options]="options"
(click)="onClick($event)
#sliderNgx
></ngx-slider>
</div>

和.ts

export class PathfinderStepSliderComponent implements OnInit {
rating: { value: string; label: string }[];
@Input('rating') set setRating(rating: { value: string; label: string }[]) {
if (rating == null) {
return;
}
this.rating = rating;
const options: Options = {
showTicks: true,
stepsArray: [],
disabled: false
};
for (let i = 0; i < rating.length; i++) {
options.stepsArray?.push({value: i, legend: rating[i].label});
}
this.options = options;
}
answer: SurveyQuestionAnswerModel;
@Input('answer') set setAnswer(answer: SurveyQuestionAnswerModel) {
this.answer = answer;
this.selectedAnswer = undefined;
}
selectedAnswer: number | undefined;
@Input('selectedAnswer') set setSelectedAnswer(answer: string) {
this.selectedAnswer = this.rating.findIndex(r => r.value === answer);
}
@Output() selectedAnswerChange = new EventEmitter<string>();
@ViewChild('sliderNgx', {static: true}) sliderNgx: ElementRef;
options: Options;
constructor(private ref: ChangeDetectorRef,
private elRef: ElementRef) {}
ngOnInit(): void {

}
sliderValueChange(value: number) {
this.selectedAnswerChange.emit(this.rating[value].value); 
}

onClick(event) {
const slider = this.elRef.nativeElement.querySelector('ngx-slider');
console.log(event);
console.log('slider');
console.log(slider);
}
}

Answer 1

所以最后，我用这个解决了我的问题。我将只读滑块选项设置为true，并添加了一个点击监听器：

onSelectAnswer(e, slider) {
// there was a bug, when you clicked on the blank space between the ticks, the index would be set to 2 (middle of slider)
const ignoreTargetClassName = 'ngx-slider-span ngx-slider-bar';

const sliderElements = [...(slider.elementRef.nativeElement.getElementsByClassName(e.target.className) as any)];

const index = sliderElements.findIndex(elem => elem === e.target);

if (index !== -1 && (e.target.className !== ignoreTargetClassName)) {
this.selectedAnswer = index;
}
}

AN和html文件：

<div class="slider-field hide-value-ticks mb-5">
<div class="subtitle-black mb-4">{{answer.rowAnswerText ?? ''}} {{answer.columnAnswerText}}</div>
<ngx-slider 
id="slider"
*ngIf="options" 
class="touch-slider" 
[value]="selectedAnswer" 
(valueChange)="sliderValueChange($event)" 
[options]="options"
(click)="onSelectAnswer($event, ngxSlider)"
#ngxSlider
></ngx-slider>
</div>