Vuejs: Touchmove запущен, но всегда возвращается к первому элементу при запуске touchstart

У меня есть вопрос, связанный с событием касания с Vuejs. Я хочу присоединиться к некоторому номеру с событием мыши (для ПК) и событием касания (для мобильных устройств) следующим образом:

        <div
          @mousedown="startMove(item)"
          @mouseup="endMove(item)"
          @mousemove="doMove(item)"

          @touchstart="startMove(item)"
          @touchend="endMove(item)"
          @touchmove="doMove(item)"          
          v-for="item in 9"
          :key="item"
        >
          {{ item }}
        </div>

Поскольку mousedown, mouseup, mousemove хорошо работают на ПК, событие касания также срабатывает на мобильных устройствах, но оно всегда возвращает элемент touchstart.
Например, если я перемещаюсь (с касанием) из 2 в 5, элемент всегда возвращает 2 в событии touchmove и touchend.

Вот мои данные:

data(){
 return {
   isMoving: false
 }
},
methods: {
 startMove(e){
   this.isMoving= true;
 },
 endMove(e) {
   this.isMoving= false;
 },
 doMove(e) {
   if (this.isMoving) {
     console.log(e)
   }
 }
}

Я тестировал в режиме разработки Chrome и тестировал на Ipad. Можете ли вы сказать мне, почему и предложить мне решение для этого. Спасибо за помощь.

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
0
35
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сенсорные события работают немного по-другому, попробуйте изменить метод doMove.

doMove(e) {
      if (this.isMoving) {
        const clientX = e.clientX || e.changedTouches[0].clientX;
        const clientY = e.clientY || e.changedTouches[0].clientY;
        console.log(document.elementFromPoint(
          clientX,
          clientY
        ).innerHTML);
      }
    },

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

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

Hai Tien 24.04.2022 11:26

Другие вопросы по теме