Событие onChange не срабатывает для ползунка input range

Здравствуйте, уважаемые форумчане! Столкнулся со следующей проблемой. Есть аудиоплеер с ползунком, который перемещается в мобильном эмуляторе (перемотка проигрывания), если нажать и удерживать левую кнопку мыши, а затем тащить, но почему-то не срабатывает на десктопе. Когда я начинаю тащить ползунок за плеером находится фон, который начинает скроллить. Если плеер убрать и просто поместить ползунок на фоне, который скроллит все в порядке, работает. Причем, событие клика на ползунке (input range) срабатывает, но не перемещает ползунок. Я плохо знаю JavaScript. Подскажите, пожалуйста, что я делаю не так. Как это можно исправить? Буду очень благодарен за вашу помощь.

0

Привет Fixer_84,

Сообщение от Fixer_84 Когда я начинаю тащить ползунок за плеером находится фон, который начинает скроллить.

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

Чтобы ответ был более точный нужно смотреть код или хотя бы название плеера. Если это стандартный HTML5 плеер тогда можно посмотреть консоль отладки. Или добавить обработчик события error к плееру.

Добавлено через 6 минут

Сообщение от Fixer_84 Если плеер убрать и просто поместить ползунок на фоне, который скроллит все в порядке, работает.

А что значит все в порядке работает?

Я так прочитал что плеер вообще музыку не воспроизводит, или воспроизводит но не работает именно то что Вы описали?

Добавлено через 6 минут
Проверьте то что Вы хотите сделать на этой странице

0

web_coder2,

Сообщение от web_coder2 Я так прочитал что плеер вообще музыку не воспроизводит, или воспроизводит но не работает именно то что Вы описали?

Здравствуйте! Спасибо за ваш ответ. Вообще, работает все кроме ползунка на десктопе. Я все это в ReactJS делаю, но так как используется событие JS я решил сюда написать. Вообщем, простыми словами: Есть фон в несколько экранов со звездами, на нем есть планеты, которые отображаются в центре фона (центральный экран - экран монитора, телефона и т.д.) при загрузке страницы. Когда я кликаю на планету появляется аудиоплеер (также сделанный в ReactJS). Плеер сожержит стандартные элементы DOM. Когда я разворчиваю плеер, он раскрывается на весь экран и появлется ползунок, который движется при проигрывании аудиозаписи. Так вот, если я тяну за ползунок влево или вправо, то запись перематывается на мобильном, но я не могу ее перемотать на десктопе, так как начинает двигаться фон со звездами (то есть срабатывает скроллинг). Я создавал отдельный тест и если ползунок поместить прямо на фон со звездами (а не поверх аудиоплеера), то все срабатывает. Мне просто нужно, чтобы экран не скроллил на фоне плеера и я не знаю как это сделать. Другими словами, мне нужно, чтобы на элементе, который выше фона (то есть, аудиоплеер), срабытывал onChange.

Добавлено через 5 минут
P.S. Куда бы я не кликал и тянул на фоне плеера, срабытвает скроллинг, а мне нужно, чтобы сработал onChange. Хотя обычные клики обрабатываются.

0

Сообщение от Fixer_84 Я создавал отдельный тест и если ползунок поместить прямо на фон со звездами (а не поверх аудиоплеера), то все срабатывает.

Не понятно, плеяк у Вас стандартный или кастомный. С кодом будет больше гарантии на решение.

0

Сообщение от Опан Не понятно, плеяк у Вас стандартный или кастомный. С кодом будет больше гарантии на решение.

Опан, здравствуйте! Спасибо за ваш ответ. Плеер кастомный, но все это я делал на ReactJS. Вы знайте эту библиотеку? Мне создать в разделе ReacJS эту тему и перенаправить отсюда? Код плеера - 600 строк. Компонента плеер еще взаимодействует с другими библиотеками, скроллинг - также компонента. Я бы выложил код, но его слишком много.

0

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

А на десктопе плеер разворачивается во весь экран? Допускаю, что нет, потому, что видны звёзды. На мобильном значит их нет, но скорее всего они тоже скроллируются, только, как бы, в уме.

0

А что если использовать ползунок какой нибудь по умолчанию не работающий с backgraund.

Добавлено через 3 минуты
ЗЫ
input range сам по себе без примочек не работает с background, по этому трудно сказать... не понятно в общем

0

Зато range работает с аудио. Ещё попробуйте создать тему в разделе ReactJS, может там кто-то с таким сталкивался.

0

Сообщение от Опан А на десктопе плеер разворачивается во весь экран? Допускаю, что нет, потому, что видны звёзды. На мобильном значит их нет, но скорее всего они тоже скроллируются, только, как бы, в уме.

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

0