Jak wykryć, że użytkownik przesunął palcem w jakimś kierunku po stronie internetowej z JavaScript?
Zastanawiałem się, czy istnieje jedno rozwiązanie, które działałoby na stronach internetowych zarówno na iPhonie, jak i telefonie z Androidem.
Jak wykryć, że użytkownik przesunął palcem w jakimś kierunku po stronie internetowej z JavaScript?
Zastanawiałem się, czy istnieje jedno rozwiązanie, które działałoby na stronach internetowych zarówno na iPhonie, jak i telefonie z Androidem.
Odpowiedzi:
Prosty przykładowy waniliowy kod JS:
Testowane w systemie Android.
źródło
touchstart
,touchmove
?Na podstawie odpowiedzi @ givanse możesz to zrobić za pomocą
classes
:Możesz go użyć w następujący sposób:
źródło
.bind
niezdefiniowanego, ponieważ whandleTouchMove
rzeczywistości nic nie zwróciłeś. również bezużyteczne jest wywoływanie wiązania podczas wywoływania funkcji,this.
ponieważ jest już związane z bieżącym kontekstem.bind(this);
i zadziałało z wdziękiem. dziękuję @nicholas_rtouches[0]
nachangedTouches[0]
i typ obsługi zdarzeniahandleTouchMove
nahandleTouchEnd
run()
dwa razy, a pojawi się nieprzyjemny wyciek pamięciPołączyłem kilka odpowiedzi tutaj w skrypcie, który używa CustomEvent do uruchamiania zdarzeń przeciągnięcia w DOM. Dodaj 0.7k przeciągnął-events.min.js skrypt do swojej strony i nasłuchiwać przeciągnął zdarzeń:
przesunął w lewo
przesunął w prawo
zamieciony
przesunięty w dół
Możesz także dołączyć bezpośrednio do elementu:
Opcjonalna konfiguracja
Możesz określić następujące atrybuty, aby dostosować funkcjonowanie interakcji przeciągania na stronie (są one opcjonalne) .
Kod źródłowy jest dostępny na Github
źródło
to, czego użyłem wcześniej, to wykrycie zdarzenia mousedown, zarejestrowanie jego lokalizacji x, y (w zależności od tego, co jest istotne), a następnie wykrycie zdarzenia mysi i odjęcie dwóch wartości.
źródło
jQuery Mobile obejmuje również obsługę przesuwania: http://api.jquerymobile.com/swipe/
Przykład
źródło
Uważam, że świetna odpowiedź @givanse jest najbardziej niezawodna i kompatybilna z wieloma przeglądarkami mobilnymi do rejestrowania operacji przeciągania.
Jednak jego kod wymaga zmiany, aby działał we współczesnych przeglądarkach mobilnych, które używają
jQuery
.event.touches
nie będzie istniał, jeślijQuery
zostanie użyty, a wynikiundefined
zostaną zastąpione przezevent.originalEvent.touches
. BezjQuery
,event.touches
powinny działać prawidłowo.Rozwiązaniem staje się
Testowane na:
źródło
event.originalEvent
. Rzeczevent.touches
przestała istnieć teraz i skutkujeundefined
.event.originalEvent
. Zaktualizuję swoją odpowiedź. Dzięki! :)Przepakowałem
TouchWipe
jako krótką wtyczkę jquery:detectSwipe
źródło
Jakiś mod najwyższej odpowiedzi (nie może komentować ...), aby poradzić sobie z krótkimi przeciągnięciami
źródło
kosz, przeciągnięcie limitu czasu, dodawanie swipeBlockElems.
źródło
Jeśli ktoś próbuje używać jQuery Mobile na Androidzie i ma problemy z wykrywaniem przesuwania JQM
(Miałem trochę na Xperia Z1, Galaxy S3, Nexus 4 i niektóre telefony Wiko). Może to być przydatne:
Przesunięcie na Androidzie nie zostało wykryte, chyba że było to bardzo długie, precyzyjne i szybkie przeciągnięcie.
Z tymi dwiema liniami działa poprawnie
źródło
$.event.special.swipe.scrollSupressionThreshold = 8;
ale skierowałeś mnie w dobrym kierunku! Dziękuję Ci!Miałem problem z ciągłym ostrzeżeniem, gdy użytkownik przeciągał palcem po okolicy. Nie wiem, czy to z powodu czegoś, co robię źle, czy nie, ale ponownie to przełączyłem, aby gromadzić ruchy za pomocą touchmove, a touchend faktycznie wyzwala oddzwonienie.
Musiałem także mieć dużą liczbę tych instancji, dlatego dodałem metody włączania / wyłączania.
I próg, w którym krótkie machnięcie nie strzela. Touchstart zero za każdym razem liczniki.
Możesz zmienić węzeł target_node w locie. Włącz przy tworzeniu jest opcjonalny.
źródło
Połączyłem też kilka odpowiedzi, głównie pierwszą i drugą z klasami, a oto moja wersja:
Następnie można użyć go w następujący sposób:
Pomaga uniknąć błędów konsoli, gdy chcesz wywoływać tylko powiedzmy metodę „onLeft”.
źródło
Używane dwa:
jQuery mobile: działa w większości przypadków, a zwłaszcza gdy tworzysz aplikację, która korzysta z innej wtyczki jQuery, lepiej jest do tego użyć kontrolek jQuery mobile. Odwiedź go tutaj: https://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp
Czas młota ! jedna z najlepszych, lekkich i szybkich bibliotek opartych na javascript. Odwiedź go tutaj: https://hammerjs.github.io/
źródło
Jeśli potrzebujesz tylko machnięcia, lepiej jest użyć mniejszego rozmiaru, używając tylko potrzebnej części. Powinno to działać na dowolnym urządzeniu dotykowym.
Jest to ~ 450 bajtów po kompresji gzip, minimalizacji, babel itp.
Napisałem niższą klasę w oparciu o inne odpowiedzi, używa ona przesunięcia procentowego zamiast pikseli oraz wzorca dyspozytora zdarzeń do zaczepiania / odczepiania rzeczy.
Używaj go w ten sposób:
źródło
Chciałem, aby wykryć tylko lewy i prawy przesunąć, ale wywołać działania tylko wtedy, gdy zdarzenie dotykowy końce , więc lekko zmodyfikowany wielką odpowiedź znaku @ givanse aby to zrobić.
Po co to robić? Jeśli na przykład podczas przeciągania użytkownik zauważy, że w końcu nie chce przesunąć, może przesunąć palec w pierwotnej pozycji (robi to bardzo popularna aplikacja do randek;)), a następnie „przesuń w prawo” wydarzenie zostało anulowane.
Aby więc uniknąć zdarzenia „przeciągnij w prawo” tylko dlatego, że istnieje różnica 3 pikseli w poziomie, dodałem próg, poniżej którego zdarzenie jest odrzucane: aby mieć zdarzenie „przeciągnięcie w prawo”, użytkownik musi przesunąć przynajmniej 1/3 szerokości przeglądarki (oczywiście możesz to zmienić).
Wszystkie te małe szczegóły zwiększają komfort użytkowania. Oto kod (Vanilla JS):
źródło
Prosty waniliowy przykład JS dla przesunięcia poziomego:
Możesz użyć tej samej logiki do pionowego przeciągnięcia.
źródło
Dodanie do tej odpowiedzi tutaj . Ten dodaje obsługę zdarzeń myszy do testowania na komputerze:
źródło
Przykład użycia z przesunięciem.
źródło
Być może łatwiej będzie ci najpierw zaimplementować go za pomocą zdarzeń myszy do prototypowania.
Jest tu wiele odpowiedzi, w tym górna, należy zachować ostrożność, ponieważ nie uwzględniają przypadków krawędzi, szczególnie wokół obwiedni.
Widzieć:
Będziesz musiał eksperymentować, aby uchwycić przypadki krawędzi i zachowania, takie jak wskaźnik poruszający się poza elementem przed zakończeniem.
Przesunięcie jest bardzo podstawowym gestem, który stanowi wyższy poziom przetwarzania interakcji interfejsu wskaźnikowego z grubsza siedzącego między przetwarzaniem nieprzetworzonych zdarzeń a rozpoznawaniem pisma ręcznego.
Nie ma jednej dokładnej metody wykrywania przesunięcia lub rzutu, chociaż praktycznie wszystkie zasadniczo przestrzegają podstawowej zasady wykrywania ruchu w poprzek elementu o progu odległości i prędkości lub prędkości. Można po prostu powiedzieć, że jeśli ruch w 65% rozmiaru ekranu w danym kierunku następuje w danym czasie, jest to przesunięcie. To, gdzie narysujesz linię i jak ją obliczysz, zależy od ciebie.
Niektórzy mogą również patrzeć na to z perspektywy pędu w kierunku i jak daleko od ekranu został wypchnięty, gdy element zostanie zwolniony. Jest to wyraźniejsze dzięki lepkim przeciągnięciom, w których element można przeciągnąć, a następnie podczas zwalniania albo odbije się do tyłu, albo odleci z ekranu, jakby sprężysta pękła.
Prawdopodobnie idealnie jest znaleźć bibliotekę gestów, którą można przenieść lub użyć ponownie, która jest zwykle używana w celu zachowania spójności. Wiele przykładów tutaj jest nadmiernie uproszczonych, rejestrując machnięcie jako najmniejszy dotyk w dowolnym kierunku.
Android byłby oczywistym wyborem, choć ma odwrotny problem, jest zbyt skomplikowany.
Wydaje się, że wiele osób błędnie zinterpretowało to pytanie jako każdy ruch w danym kierunku. Przeciągnięcie to szeroki i stosunkowo krótki ruch w przeważającej części w jednym kierunku (choć może być łukowy i mieć pewne właściwości przyspieszające). Rzut jest podobny, choć ma zamiar niedbale wypchnąć przedmiot na znaczną odległość pod własnym pędem.
Te dwie są wystarczająco podobne, że niektóre biblioteki mogą zapewniać tylko fling lub machnięcie, których można używać zamiennie. Na płaskim ekranie trudno jest naprawdę rozdzielić dwa gesty i ogólnie mówiąc, ludzie robią oba (przesuwając ekran fizyczny, ale odrzucając element interfejsu użytkownika wyświetlany na ekranie).
Najlepszą opcją jest nie robić tego sam. Istnieje już duża liczba bibliotek JavaScript do wykrywania prostych gestów .
źródło
I przerobione @givanse rozwiązanie jest do działania jako React haka. Dane wejściowe to niektóre opcjonalne detektory zdarzeń, dane wyjściowe to funkcjonalny ref (musi być funkcjonalny, aby można było ponownie uruchomić hak, gdy / jeśli ref zmieni).
Dodano również parametr progu przesunięcia w pionie / poziomie, aby małe ruchy nie wyzwalały przypadkowo detektorów zdarzeń, ale można je ustawić na 0, aby dokładniej naśladować oryginalną odpowiedź.
Wskazówka: aby uzyskać najlepszą wydajność, funkcje wejściowe detektora zdarzeń powinny zostać zapamiętane.
źródło