Работает mousemove, а touchmove - Нет!

@Artiom-1984 · Регистрация: 11.09.2018

Студворк — интернет-сервис помощи студентам

Пишу игру на JS. Типа в сетке нужно найти слова и пометить их. На десктопах - мышой, на тачскринах - пальцем. Нашел методы touchstart, touchmove, и touchend. Обрадовался. Но оказалось, метод touchmove работает как-то "неправильно".

На десктопе все ОК (screen1). А на тачскринах выделяется только первый блок. Далее этот event вообще не вызывается. В консоли никаких ошибок нет!

Вот мой код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
jQuery('.field').on('touchstart mousedown', function(){
    videl = true;
    arr_videl.length = 0;
    jumpCount = 0;
});
 
jQuery('.field').on('touchmove mousemove', function(){
    if(videl){
        field_id = this.id;
        field_id = field_id.slice(1);
        if(arr_videl.length > 0) var last_id = arr_videl[arr_videl.length - 1].slice(1);
        if(arr_videl.length > 1) var delta = arr_videl[1].slice(1) - arr_videl[0].slice(1);
        
 
        if(arr_videl.length == 0 || delta === undefined || (delta == 1 && field_id - last_id == 1) || (delta == horizontal_count && field_id - last_id == horizontal_count)){
            jQuery(this).css('color', 'blue');
            if(!arr_videl.includes(this.id))arr_videl.push(this.id);
        }
 
    }
    
});

Я использую jQuery, но пойдет решение и на чистом JavaScript.

@DrType · 29.12.2021, 22:49

Не исключено, что источник проблемы не в коде, а в особенностях эмуляции touch-устройств вашим браузером.

@Artiom-1984 · 30.12.2021, 07:29 **[ТС]**

Не! Я выложил на хостинг. На смартфоне то же самое!

@DimaDima1985 · 30.12.2021, 11:11

А я вот не увидел обработки тач событий.
Тач события куда сложней мышиных. Там много пальцев можно одновременно анализировать, есть объект event.touches со всеми касаниями.
Не забывайте, что браузеры при пальцетыкании просто эмулируют мышиные события для совместимости.

@Artiom-1984 · 30.12.2021, 12:37 **[ТС]**

Так что делать то? События touchstart и touchend далее у меня отлично срабатывают...

@DrType · 30.12.2021, 12:46

А зачем вам нужно обрабатывать touchmove? Это событие возникает, когда в переделах элемента двигают пальцем. Но ячейки небольшие... Мне кажется, логику можно реализовать, обрабатывая другие события. Или нет?

@Artiom-1984 · 30.12.2021, 14:58 **[ТС]**

Ну я же в первом посте рассказал, мне нужно на тачскринах выделить слово. Каждая буква слова в отдельном блоке. На компьютерах уже работает, на телефонах - нет. Разумеется можно какие-то другие варианты, если touchmove совсем не годится...

Добавлено через 16 минут
Так, стоп! Если этот эвент работает только в пределах блока, то, может стоит навесить его на родительский блок? А ячейки выделять по координатам?

Добавлено через 1 час 49 минут
Ура, получилось!

Собрал в объект координаты каждой клетки

JavaScript
1
2
3
4
5
6
7
8
const FIELD_KOORD = {};
for(let i = 1; i <= field_count; i++){
    FIELD_KOORD['f' + i] = [];
    FIELD_KOORD['f' + i][0] = jQuery('#f' + i).offset().left;
    FIELD_KOORD['f' + i][1] = jQuery('#f' + i).offset().top;
    FIELD_KOORD['f' + i][2] = jQuery('#f' + i).offset().left + field_width;
    FIELD_KOORD['f' + i][3] = jQuery('#f' + i).offset().top  + field_width;
}

И далее вот такая обработка события на родительском блоке

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
jQuery('.game').on('touchmove', function(e){
    if(videl){
        let koordX = e.originalEvent.touches[0].pageX;
        let koordY = e.originalEvent.touches[0].pageY;
 
        for (let id in FIELD_KOORD) {
            if(FIELD_KOORD[id][0] < koordX && FIELD_KOORD[id][1] < koordY && FIELD_KOORD[id][2] > koordX && FIELD_KOORD[id][3] > koordY){
                field_id = id;
                break;
            }
        }
 
        jQuery('#' + field_id).css('color', 'blue');
        if(!arr_videl.includes(field_id))arr_videl.push(field_id);
    }
 
});

От mousemove, разумеется, убрал touchmove. События touchstart и touchend не менял.

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	29.12.2021, 22:49
	Не исключено, что источник проблемы не в коде, а в особенностях эмуляции touch-устройств вашим браузером. 0

@Artiom-1984 52 / 5 / 1 Регистрация: 11.09.2018 Сообщений: 324
	30.12.2021, 07:29 [ТС]
	Не! Я выложил на хостинг. На смартфоне то же самое! 0

@DimaDima1985 331 / 238 / 80 Регистрация: 15.11.2017 Сообщений: 453 Записей в блоге: 4
	30.12.2021, 11:11
	А я вот не увидел обработки тач событий. Тач события куда сложней мышиных. Там много пальцев можно одновременно анализировать, есть объект event.touches со всеми касаниями. Не забывайте, что браузеры при пальцетыкании просто эмулируют мышиные события для совместимости. 0

@Artiom-1984 52 / 5 / 1 Регистрация: 11.09.2018 Сообщений: 324
	30.12.2021, 12:37 [ТС]
	Так что делать то? События touchstart и touchend далее у меня отлично срабатывают... 0

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	30.12.2021, 12:46
	А зачем вам нужно обрабатывать `touchmove`? Это событие возникает, когда в переделах элемента двигают пальцем. Но ячейки небольшие... Мне кажется, логику можно реализовать, обрабатывая другие события. Или нет? 0