Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.63/8: Рейтинг темы: голосов - 8, средняя оценка - 4.63
1 / 1 / 0
Регистрация: 15.03.2021
Сообщений: 33

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

15.12.2022, 17:59. Показов 1728. Ответов 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
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru