Блог

Главная - Вопросы по программированию - Как предотвратить нажатие на интервал в Ion.RangeSlider?

Как предотвратить нажатие на интервал в Ion.RangeSlider?

#javascript #ion-range-slider

#javascript #ion-range-slider

Вопрос:

В плагине Ion.RagerSlider панель интервалов является интерактивной. Это проблема на мобильных устройствах, когда пользователь случайно нажимает на элемент при попытке прокрутки.

Как я могу отключить событие щелчка на панели интервалов?

Я не смог найти решение в официальной документации.

Комментарии:

1. Помогает ли это? : ionden.com/a/plugins/ion.rangeSlider/api.html#a_interval

2. @Towkir К сожалению, нет. Ни один из этих методов не отключает щелчок по интервалу.

3. можете ли вы добавить фрагмент, который показывает проблему, и немного уточнить свой вопрос, пожалуйста?

Ответ №1:

У меня это работает отлично. Просто добавьте в css:

 ion-range {
  pointer-events: none;
}

ion-range::part(knob) {
  pointer-events: auto;
}

Кажется, работает в большинстве браузеров. Посмотрите здесь:https://caniuse.com/pointer-events

Ответ №2:

Я сталкиваюсь с той же проблемой, когда при нажатии за пределы выбранного диапазона на панели весь диапазон перемещается в местоположение касания. В зависимости от расположения и размера панели на экране довольно легко непреднамеренно сделать это и потерять значения ползунка.

Хотя он официально не поддерживается версией 2.3.1, я обнаружил, что удаление привязки событий touchstart и mousedown к строке диапазона сделало свое дело. https://github.com/IonDen/ion.rangeSlider/blob/2.3.1/js/ion.rangeSlider.js#L686#L687

Более общим подходом может быть создание нового параметра конфигурации с именем что-то вроде disable_line_touch со значением по умолчанию false и пропускать вышеуказанную привязку только в том случае, если для его значения установлено значение true .