Как вы можете обнаружить, что пользователь провел пальцем в каком-то направлении по веб-странице с помощью JavaScript?
Мне было интересно, есть ли одно решение, которое будет работать для веб-сайтов на iPhone и Android-телефон.
javascript
iphone
android
swipe
+827
источник
источник
Ответы:
Простой ванильный пример кода JS:
Проверено в Android.
источник
touchstart
,touchmove
?Основываясь на ответе @ givanse, вы можете сделать это следующим образом
classes
:Вы можете использовать его следующим образом:
источник
.bind
undefined, потому что выhandleTouchMove
фактически ничего не возвращали. также бесполезно вызывать связывание при вызове функции,this.
потому что оно уже связано с текущим контекстом.bind(this);
и это сработало изящно. спасибо @nicholas_rtouches[0]
наchangedTouches[0]
и тип обработчика событияhandleTouchMove
наhandleTouchEnd
run()
дважды, и вы получите неприятную утечку памятиЯ объединил несколько ответов здесь в сценарий, который использует CustomEvent для запуска swiped- событий в DOM. Добавьте скрипт 0.7k swiped -events.min.js на свою страницу и прослушайте swiped события :
спер-влево
наотмашь правой
прокатывается вверх
стащили вниз
Вы также можете прикрепить непосредственно к элементу:
Необязательный конфиг
Вы можете указать следующие атрибуты, чтобы настроить функции взаимодействия смахиванием на своей странице (они необязательны) .
Исходный код доступен на Github
источник
То, что я использовал ранее, это то, что вы должны обнаружить событие mousedown, записать его x, y местоположение (в зависимости от того, что имеет отношение), затем обнаружить событие mouseup и вычесть два значения.
источник
jQuery Mobile также включает поддержку смахивания: http://api.jquerymobile.com/swipe/
пример
источник
Я обнаружил, что @givanse brilliant answer является наиболее надежным и совместимым с несколькими мобильными браузерами для регистрации действий смахивания.
Однако в его коде есть изменения, необходимые для его работы в современных мобильных браузерах
jQuery
.event.touches
не будет существовать, еслиjQuery
используется и приводит кundefined
заменеevent.originalEvent.touches
. БезjQuery
,event.touches
должно работать нормально.Таким образом, решение становится,
Проверено на:
источник
event.originalEvent
. Дело в томevent.touches
, прекратило свое существование в настоящее время и приводитundefined
.event.originalEvent
. Я обновлю свой ответ. Спасибо! :)Я переупаковал
TouchWipe
как короткий плагин jquery:detectSwipe
источник
Какой-то мод самого откровенного ответа (не могу комментировать ...) для коротких ударов
источник
trashold, timeout swipe, swipeBlockElems добавить.
источник
Если кто-то пытается использовать jQuery Mobile на Android и имеет проблемы с распознаванием пролистывания JQM
(У меня были некоторые на Xperia Z1, Galaxy S3, Nexus 4 и некоторых телефонах Wiko), это может быть полезно:
Удар по Android не был обнаружен, если это не было очень длинным, точным и быстрым проведением.
С этими двумя строчками все работает правильно
источник
$.event.special.swipe.scrollSupressionThreshold = 8;
но вы направили меня в правильном направлении! Спасибо!У меня были проблемы с непрерывной стрельбой обработчика касаний, пока пользователь тащил палец. Я не знаю, связано ли это с чем-то, что я делаю неправильно или нет, но я переписал это, чтобы накапливать движения с помощью touchmove, и touchend фактически запускает обратный вызов.
Мне также нужно было иметь большое количество этих экземпляров, поэтому я добавил методы включения / выключения.
И порог, когда короткий удар не срабатывает. Сенсорный запуск нулевых счетчиков каждый раз.
Вы можете изменить target_node на лету. Включить при создании не обязательно.
источник
Я также объединил несколько ответов, в основном первый и второй с классами, и вот моя версия:
После этого можете использовать его как следующее:
Это помогает избежать ошибок консоли, когда вы хотите вызывать только, скажем, метод "onLeft".
источник
Использовано два:
jQuery для мобильных устройств: работает в большинстве случаев, особенно когда вы разрабатываете приложение, которое использует другой плагин jQuery, тогда лучше использовать для этого мобильные элементы управления jQuery. Посетите его здесь: https://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp
Время Молота! одна из лучших, легких и быстрых библиотек на основе JavaScript. Посетите его здесь: https://hammerjs.github.io/
источник
Если вам просто нужно провести, вам лучше выбрать размер, используя только ту часть, которая вам нужна. Это должно работать на любом сенсорном устройстве.
Это ~ 450 байт после сжатия gzip, минификации, babel и т. Д.
Я написал приведенный ниже класс на основе других ответов, он использует процентное смещение вместо пикселей и шаблон диспетчера событий для зацепления / отсоединения объектов.
Используйте это так:
источник
Я хотел , чтобы обнаружить левый и правый красть только, но вызвать действие только тогда , когда касание событий конца , так что я немного измененным большой ответ на @ givanse, чтобы сделать это.
Зачем это делать? Например, если во время пролистывания пользователь замечает, что, наконец, не хочет сильно ударить, он может переместить палец в исходное положение. (это делает очень популярное приложение для знакомств на телефоне;)), а затем «пролистать вправо». Событие отменено.
Таким образом, чтобы избежать события «проведите вправо» только из-за разницы в 3 пикселя по горизонтали, я добавил пороговое значение, при котором событие отбрасывается: для того, чтобы событие «проходило вправо», пользователь должен провести как минимум 1/3 ширины браузера (конечно, вы можете изменить это).
Все эти мелкие детали улучшают пользовательский опыт. Вот код (Vanilla JS):
источник
Простой ванильный пример JS для горизонтального смахивания:
Вы можете использовать почти такую же логику для вертикальной прокрутки.
источник
Добавление к этому ответу здесь . Этот добавляет поддержку событий мыши для тестирования на рабочем столе:
источник
Я переработал решение @givanse , чтобы оно функционировало как React Hook. Input - это некоторые необязательные прослушиватели событий, output - это функциональная ссылка (должна быть функциональной, чтобы хук мог перезапуститься, когда / если ссылка изменилась).
Также добавлено в параметре порог вертикальной / горизонтальной прокрутки, чтобы небольшие движения не вызывали случайное прослушивание событий, но их можно установить на 0, чтобы более точно имитировать исходный ответ.
Совет: для лучшей производительности функции ввода прослушивателя событий должны быть запомнены.
источник
Пример использования со смещением.
источник
Возможно, вам будет проще сначала реализовать его с помощью событий мыши для создания прототипа.
Здесь есть много ответов, включая верхние, поэтому их следует использовать с осторожностью, поскольку они не учитывают крайние случаи, особенно вокруг ограничивающих рамок.
Видеть:
Вам нужно будет поэкспериментировать, чтобы поймать крайние случаи и поведение, такое как указатель, перемещающийся за пределы элемента перед завершением.
Проведение - это очень простой жест, представляющий собой более высокий уровень обработки взаимодействия с указателем на интерфейсе, находящийся примерно между обработкой необработанных событий и распознаванием рукописного ввода.
Не существует единого точного метода обнаружения удара или броска, хотя практически все обычно следуют базовому принципу обнаружения движения через элемент с порогом расстояния и скорости или скорости. Вы могли бы просто сказать, что если в течение заданного времени происходит перемещение на 65% размера экрана в заданном направлении, то это будет скачком. Где именно вы рисуете линию и как вы ее рассчитываете, зависит от вас.
Некоторые могут также смотреть на это с точки зрения импульса в направлении и как далеко от экрана он был нажат, когда элемент выпущен. Это становится понятнее с помощью липких движений, когда элемент можно перетаскивать, а затем при отпускании он либо отскакивает назад, либо отлетает с экрана, как если бы резинка сломалась.
Возможно, лучше всего попытаться найти библиотеку жестов, которую можно либо перенести, либо использовать повторно, которая обычно используется для согласованности. Многие из приведенных здесь примеров являются чрезмерно упрощенными, регистрируя движение как малейшее касание в любом направлении.
Android был бы очевидным выбором, хотя имеет противоположную проблему, он слишком сложен.
Похоже, что многие люди неверно истолковали этот вопрос как любое движение в направлении. Размах - это широкое и относительно короткое движение в подавляющем большинстве случаев в одном направлении (хотя оно может быть дугообразным и иметь определенные свойства ускорения). Бросок аналогичен, хотя намеревается случайно отбросить предмет на достаточное расстояние под действием собственного импульса.
Они достаточно похожи, так что некоторые библиотеки могут предоставлять только бросок или пролистывание, которые могут использоваться взаимозаменяемо. На плоском экране трудно по-настоящему разделить два жеста, и вообще говоря, люди делают оба (смахивание физического экрана, но бросание элемента пользовательского интерфейса, отображаемого на экране).
Лучший вариант - не делать это самостоятельно. Уже есть большое количество библиотек JavaScript для обнаружения простых жестов .
источник