Здравствуйте, учусь делать простенькие ползунки, столкнулся с проблемой
Во время клика, функция возвращает координату в каком месте был совершен клик, после чего с помощью другой функции и стиля left я передвигаю ползунок
Суть проблемы, при нажатии на любом месте, ползунок передвигается куда нужно, но стоит нажать на сам ползунок он принимает позицию 0-15, т.к функция возвращает координаты клика ползунка, т.е функция по нажатию возвращает координаты вложенных элементов, а по идее ничего не должно происходить, помогите пожалуйста, я в js 1.5 дня.
Вот сами ползунки
Вот косячная функция:
public getCoordinates(block: any, event: any) {
event.stopPropagation();
let x: number = event.layerX;
return this.conventPersent(block, x);
}
Весь код в целом
export default class Model {
private blocks: any;
constructor(data: any) {
this.searchBlocks(data.blockName);
this.searchController()
}
public getBlocks() {
return this.blocks
}
public getCoordinates(block: any, event: any) {
event.stopPropagation();
let x: number = event.layerX;
return this.conventPersent(block, x);
}
private conventPersent(block: any, value: number) {
return value / block.offsetWidth * 100;
}
private searchBlocks(blockName: string) {
this.blocks = document.getElementsByClassName(blockName);
}
private searchController() {
for (let i = 0; i < this.blocks.length; i++) this.blocks[i].querySelectorAll('.range-slider__point');
}
}
import Model from "./Model";
import Views from "./Views";
export default class Presenter {
protected model: Model = new Model({
blockName: 'range-slider'
});
protected views: Views = new Views();
constructor() {
this.trackClickController()
}
protected trackClickController() {
const model: Model = this.model;
for (let block of model.getBlocks())
block.onclick = () => this.views.setPoint(block, model.getCoordinates(block, event));}
}
export default class Views {
public setPoint(block : any, coordinates : number ,namePoint : string = 'range-slider__point_one')
{
return block.querySelector('.' + namePoint).style.left = `${coordinates}%`
}
}
Средний
