Wyłącz wypalanie touchcancel w przeglądarce Androida

Question

Tworzę witrynę mobilną, która korzysta z wydarzeń dotykowych JavaScript. Wszystko działa dobrze w Safari na iOS i Chrome na Androida, ale wersja Android Browser (wersja 4.1.2) sprawia mi kłopoty.

Podczas procesu dotykowego zdarzenia o nazwie touchstart i touchmove są wywoływane zgodnie z oczekiwaniami. Jednak jedna z akcji wykonywanych przez program obsługi touchmove wydaje się powodować przedwczesne zdarzenie touchcancel. (Nie jestem pewien, czy jest to znaczące, ale akcja, która wyzwala touchcancel, jest modyfikacją atrybutu obiektu SVG o wartości viewBox.) Jeśli skomentuję tę akcję, proces dotykowy przebiega normalnie (tj. Zakończenie touchmove do touchend).

Wszystkie moje programy do obsługi dotykowej wywołują funkcję preventDefault(), więc problem nie jest tym, który został opisany w tym błędzie: https://code.google.com/p/android/issues/detail?id=19827.

Przeczytałem, że jest dużo inconsistency among browsers, kiedy jest wywoływana touchcancel. Przeglądarka plików Android jest jedyną, która jest dla mnie problematyczna.

Czy istnieje obejście? Czy na przykład mogę całkowicie wyłączyć wydarzenie touchcancel? Innym pomysłem, który miałem, było to, aby program obsługi touchcancel programowo wyzwalał kolejne wydarzenie, ale nie za bardzo się z tym uporałem. Wszelkie pomysły będą mile widziane.

Answer 1

Myślę, że touchcansel to specjalne wydarzenie, które wyzwala się, gdy użytkownik dotknął przycisku w określonym zachowaniu.

Przykł. Użytkownik dotknął przycisku, ale nie wyjął palca z wyświetlacza dokładnie na tym przycisku, zamiast tego mógł przesunąć go nieco w lewo i zakończyć tam akcję. W takim przypadku pojawi się touchcancel.

Jeśli więc nie chcesz, aby ta akcja była uruchamiana, myślę, że musisz usunąć wszystkie procedury obsługi powiązane z tą akcją w przeglądarce Androida.

$ ('selektor'). Off ('touchcancel'), od tego, czy jest to delefated $ ('rodzica'). Undelegate ('touchcancel', 'wyboru')

nie sądzę, że istnieje jest problem z e.preventDefault(). Może być tylko wtedy, gdy klikniesz link, a strona zacznie się ponownie ładować. Strona może zostać ponownie załadowana po kliknięciu przycisku? i czekasz na niektóre akcje po ponownym załadowaniu strony, tak naprawdę możesz nie zrozumieć, że to się stało.

Answer 2

Wiem, że jest trochę za późno, ale jeśli ktoś inny ma do czynienia z tym problemem, wyjaśnił, jak radzić sobie z wydarzeniami pointercancel i touchcancel.

Zasadniczo, jeśli przełącznik do wskaźnik zdarzeń będziesz w stanie zapobiec pointercancel po prostu za pomocą właściwości CSS touch-action o wartości none, jak długo przeglądarka ma obie te cechy prawidłowo realizowane. (Android 5+, Chrome 55+, IE11, EDGE, itp)

Jeśli naprawdę musi wykorzystać dziedzictwo dotykowych wydarzenia zamiast, będziesz musiał wdrożyć event.preventDefault() w wydarzeniach touchmove a to uniemożliwi touchcancel z odpaleniem , ale całkowicie uniemożliwi przeglądanie domyślnych działań, takich jak panoramowanie lub kliknięcie.

Jako ostatnia uwaga, nie używałbym zdarzeń dotykowych + reguł CSS dotyku akcji ponieważ touch-action został niedawno dodany, w tym samym czasie, co zdarzenia wskaźnika. Więc podczas gdy ta kombinacja może działać w nowszych przeglądarkach, to na pewno zawiedzie w starszych (przez nieoczekiwane wyzwalanie zdarzenia).

Sprawdź README z dodanego przeze mnie rozszerzenia jQuery, ponieważ wyjaśnia on konsekwencje używania interfejsów TouchEvent i PointerEvent.

Answer 3

Jeśli useing hammer.js można wyłączyć pointer-wydarzenia (które powodują problemy jak ten), dodając: delete window.PointerEvent; w swoim index.html przed załadunkiem hammer.js i będzie ignorować te wydarzenia .
Możesz również ustawić SUPPORT_POINTER_EVENTS = false; (wiersz 384 v2.0.8), aby zrobić to samo. Idealnie byłoby, gdyby deweloperzy dodali możliwość wyłączenia tego, ale tak samo wygląda dylemat open source ...