1 / 1 / 0
Регистрация: 15.03.2021
Сообщений: 33

touchmove не работает как надо в мобильных браузерах android, а в iOS работает

15.12.2022, 17:59. Показов 1915. Ответов 6

Студворк — интернет-сервис помощи студентам
Очень нужна ваша помощь, потому что вообще не понимаю, в чём может быть дело. Пытаюсь для своих прикладных задач доработать плеер из вот этой штуки: https://tympanus.net/codrops/2... rd-player/. Хочу, чтобы игла при проигрывании музыки двигалась перетаскиванием не только с компа, как было в оригинале. Добавила в функции, отвечающие за движение, как мне казалось, логичные прослушки событий touchstart-touchmove-touchend. В браузере safari на iOS все заработало без проблем. В хроме на android, когда я нажимаю пальцем на иглу и пытаюсь её перетащить, весь интерфейс на экране тупо ломается: музыка сбрасывается, игла, конечно, никуда не движется, и вообще ни одна кнопка и ссылка на экране больше не нажимается. Помогает только перезагрузка страницы. Такое чувство, что после вызова startDragging никакие события touch больше не ловятся, и потому все зависает. В чем может быть проблема? Помогите, пожалуйста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
    Turntable.prototype._initEvents = function() {
        // Dragging functionality based on http://tutorialzine.com/2011/11/pretty-switches-css3-jquery/
        var self = this, 
            startDeg = -1, currentDeg = 0, rad2deg = 180/Math.PI;
 
        // Mousedown event.
        this.startDragging = function() {
            // Start dragging. 
            self.isDragging = true;
            // Current rotation.
            currentDeg = self.armRotation ? self.armRotation : currentDeg;
            // If playing then stop playing and stop the animation of the tonearm element.
            if( self.source ) {
                self.stop();
            }
 
            document.addEventListener('mousemove', self.dragging);
            document.addEventListener('touchmove', self.dragging);
            document.addEventListener('mouseup', self.stopDragging);
            document.addEventListener('touchcancel', self.stopDragging); 
            document.addEventListener('touchend', self.stopDragging);
        };
 
        // Mousemove event.
        this.dragging = function(ev) {
            var deg = Math.atan2(self.armCenterPoint.y - ev.pageY, self.armCenterPoint.x - ev.pageX) * rad2deg;
            // Save the starting position of the drag.
            if( !startDeg || startDeg == -1 ){
                startDeg = deg;
            }
            // Calculating the current rotation.
            var tmp = (deg-startDeg) + self.armRotation;
            // Making sure the current rotation stays between 0 and this.angleInterval.max.
            if( tmp < 0 ){
                tmp = 0;
            }
            else if( tmp > self.angleInterval.max ){
                tmp = self.angleInterval.max;
            }
            currentDeg = tmp;
            
            // update the tonearm rotation value
            dynamics.css(self.ui.arm, { rotateZ : currentDeg });
        };
 
        // Mouseup event.
        this.stopDragging = function() {
            self.isDragging = false;
 
            document.removeEventListener('mousemove', self.dragging);
            document.removeEventListener('touchmove', self.dragging);
            document.removeEventListener('mouseup', self.stopDragging);
            document.removeEventListener('touchcancel', self.stopDragging); 
            document.removeEventListener('touchend', self.stopDragging);
 
            // Saving the current rotation.
            self.armRotation = currentDeg;
            // Marking the starting degree as invalid.
            startDeg = -1;
            // If isPlatterRotating = true then keep playing.
            if( self.isPlatterRotating ) {
                self._resume();
            }
        };
 
        // Start dragging the tonearm elem.
        this.ui.arm.addEventListener('mousedown', this.startDragging);
        this.ui.arm.addEventListener('touchstart', this.startDragging);
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
15.12.2022, 17:59
Ответы с готовыми решениями:

Работа с <audio> в мобильных браузерах ios, android (обход ограничений на воспроизведение)
Доброго времени суток. Нужно программно запускать воспроизведение трека на сайте, но мобильные браузеры на ios, android запрещают...

JS не работает как надо в IE и в Edge браузерах
Здравствуйте! У меня на сайте слева-сверху (как раз надо лого) находится маленький плеер, работающий на JS. Всё летает, но в IE и в Edge...

Анимация CSS не работает на некоторых мобильных браузерах
Для теста взял старый телефон с андроидом 4.4, и проверил в 3-х браузерах: хром, UC, и стандартный. Анимация работает только в хроме, в...

6
1 / 1 / 0
Регистрация: 15.03.2021
Сообщений: 33
16.12.2022, 17:35  [ТС]
Пробовала как-то с компа отладить, несмотря на то, что touch-действия там не настоящие), но там тоже все работает... Но если убирать прослушку touchmove, то везде всё ломается именно таким же образом, как на андроиде, то есть проблема реально в том, что несмотря на то, что touchart на андроиде ловится так же спокойно, как везде, touchmove и touchend после этого почему-то не происходят. Ну объясните кто-то дурачке, почему(
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
16.12.2022, 18:05
А ошибки в консоли какие?
Было бы неплохо также увидеть код в действии. По этому отрывку сложно что-то сказать.
0
16.12.2022, 18:06

Не по теме:

с мобильными браузерами надо просто подружиться
(с)

0
1 / 1 / 0
Регистрация: 15.03.2021
Сообщений: 33
16.12.2022, 18:23  [ТС]
Цитата Сообщение от Balanaar Посмотреть сообщение
Было бы неплохо также увидеть код в действии. По этому отрывку сложно что-то сказать.
ну вот здесь я ковыряюсь

ошибок в консоли по теме я не вижу, просто функция startDragging все свои процессы вызывает, музыку приостанавливает и т.д... а EventListener'ы ни на move ни на end почему-то не срабатывают, потому остается только впустую крутящаяся пластинка), она останавливается, когда кончается трек, а трек не кончается, потому что startDragging его прервал насильно, а
в stopDragging мы никогда не попадём. Я просто вообще не знаю, в какую сторону думать, потому что, повторюсь, тот же код в safari на iOS работает прекрасно
0
 Аватар для evikza
968 / 530 / 244
Регистрация: 20.05.2015
Сообщений: 776
16.12.2022, 22:21
Лучший ответ Сообщение было отмечено webblond07 как решение

Решение

webblond07, Здравствуйте.

Цитата Сообщение от webblond07 Посмотреть сообщение
... игла, конечно, никуда не движется
Когда Вы пытаетесь сдвинуть иглу, вызывается метод dragging. Происходит расчет расположения по координатам X и Y на странице. Для события mousemove это будет работать. Но, не для touchmove.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var deg =
  Math.atan2(
    self.armCenterPoint.y - ev.pageY,
    self.armCenterPoint.x - ev.pageX
  ) * rad2deg;
 
// Использование для события `touchmove`
 
var deg =
  Math.atan2(
    self.armCenterPoint.y - ev.changedTouches[0].pageY,
    self.armCenterPoint.x - ev.changedTouches[0].pageX
  ) * rad2deg;
Делайте проверку на устройство и применяйте необходимый метод.

Иголка двигается, песня перематывается. Но, местами дергается. Проверял на Android. Это всё конечно решается, но не очень в этом силен.
1
1 / 1 / 0
Регистрация: 15.03.2021
Сообщений: 33
17.12.2022, 12:19  [ТС]
evikza, спасибо! Добавила проверку (эксперимента ради убрав оттуда все устройства apple), и на телефоне все правда заработало как надо.
JavaScript
1
2
3
4
5
if (/Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        var deg = Math.atan2(self.armCenterPoint.y - ev.changedTouches[0].pageY, self.armCenterPoint.x - ev.changedTouches[0].pageX) * rad2deg;
  } else    {
        var deg = Math.atan2(self.armCenterPoint.y - ev.pageY, self.armCenterPoint.x - ev.pageX) * rad2deg;
}
Теперь буду знать, что на iOS походу к тачам как-то проще отношение, потому что там простых pageX, pageY таки хватает)
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
17.12.2022, 12:19
Помогаю со студенческими работами здесь

Почему не работает прокрутка страницы в мобильных браузерах Bootstrap-шаблона?
Добавлено через 23 минуты Уже решил Просьба удалить тему

Не работает код как надо кто может сказать мне, почему не работает как надо?
Сама задача: (Компьютерное моделирование: заяц и Черепаха) В атом упражне-нии вам предстоит воспроизвести одно из великих исторических...

Приложени Angular + asp.net core web api не работает в браузерах на мобильных устройствах
Сделал тестовое Angular приложение, которое дёргает .net core web api, используется jwt аутентификация. В web api настроил cors запросы...

Не работает touchMove
Не корректно работает событие touchmove: На скаченных браузерах работает, но на стандартном андроид браузере работает первые событий 10,...

Разработчик мобильных приложений iOS/Android
Открыта вакансия разработчик мобильных приложений iOS/Android. (Москва) Примерное описание вакансии Обязанности: ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

Новые блоги и статьи
Валидация и контроль данных табличной части документа перед записью
Maks 22.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .
Отчёт о затраченных материалах за определенный период с макетом печатной формы
Maks 21.04.2026
Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .
Отчёт о спецтехнике находящейся в ремонте
Maks 20.04.2026
Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .
Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)"
Hrethgir 19.04.2026
Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии
Maks 19.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов
alhaos 17.04.2026
Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда".
kumehtar 16.04.2026
Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .
My Business CRM
MaGz GoLd 16.04.2026
Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru