2011-02-07 14 views
65

Zajmuję się tworzeniem aplikacji HTML na iPada. Jako taki wykorzystuje zdarzenia dotykowe i animacje webkit-CSS.Symulowanie zdarzeń dotyku w przeglądarce PC

Do tej pory używałem chrome jako środowiska do debugowania, ponieważ jest to wspaniały tryb programisty.

Chciałbym móc debugować mój Html/JavaScript za pomocą debuggera Google-Chrome na moim komputerze, symulując zdarzenia dotykowe za pomocą myszy.

Moja witryna nie zawiera żadnych zdarzeń związanych z wieloma dotknięciami ani zdarzeń związanych z myszą (bez myszy na iPadzie).

W rzeczywistości nie interesuje mnie układ aplikacji, ale więcej w debugowaniu jego zachowania.

Czy jest jakaś wtyczka umożliwiająca przekształcenie wydarzeń myszy w zdarzenia dotykowe w przeglądarce na komputerze?

+1

Nie ma substytutu dla debugowania witryny na rzeczywistym urządzeniu (szczególnie jeśli kiedykolwiek zdecydować na wsparcie multi-touch). Na szczęście debugowanie w Chrome na komórki jest [bardzo łatwe] (https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?hl=en), teraz możesz zdalnie debugować przez twój komputer. Możesz połączyć się z ADB również przez Wi-Fi, nie potrzebujesz kabla USB. – rustyx

Odpowiedz

94

As z dnia 13 kwietnia 2012

W Google Chrome deweloper i kanarek buduje obecnie istnieje pole dla „emuluje dotyk wydarzenia "

Możesz go znaleźć otwierając e Narzędzia programistów F12 i kliknięcie narzędzia w prawym dolnym rogu ekranu.

on Chrome v22 Mac OS X

Na razie (Chrome ver.36.0.1985.125) można go znaleźć tutaj: F12 => Esc => Emulation. console

+0

nie ma dla mnie pola wyboru. chrom 18.0 osx lew. Kliknął na mały sprzęt, ale nie ma tu pola wyboru! – codepushr

+1

* Emulacja wydarzeń dotykowych * jest w przeglądarce Chrome 19 i nowszych wersjach. –

+15

Co właściwie oznacza "emulacja zdarzeń dotykowych"? –

0

Jeśli specjalnie kierujesz się do Webkita (iPad i wszystkie), możesz polegać na zwykłym kodzie obsługi zdarzenia (add/removeEventListener). Mając to na uwadze, prawdopodobnie potrzebujesz rozgałęzienia na kilka zdarzeń - np. "Ontouchstart" staje się "onclick" w oparciu o środowisko.

Od ręki Nie znam żadnych bibliotek zapewniających taki poziom rozgałęzienia. Całkiem łatwe do zrobienia samemu.

+0

Dzięki, właśnie to robię teraz. Ale ... wiele mojego kodu ma związek z pisaniem angażujących niestandardowych kontrolek, co oznacza, że ​​każda kontrolka ma swoje unikalne zachowanie po dotknięciu. Dlatego szukam fragmentu javas-cript, który może zrobić to raz na poziomie dokumentu (przy zachowaniu niezależnego OnTouch dla każdego innego elementu dokumentu). A może wtyczka przeglądarki. Wydaje się, że jest to dość ogólne wymaganie (debugowanie witryn mobilnych w przeglądarce na komputerze ...) – eshalev

2

Używamy tego skryptu: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ Pozwoli to na uruchamianie wszystkich zdarzeń myszy w aplikacji przez zdarzenia dotykowe. Tak więc, ponieważ mieliśmy już aplikację internetową, która używała klikania prawym przyciskiem myszy, przeciągania i upuszczania itp., Pozwalała nam wykonywać wszystkie te same funkcje za pomocą dotyku.

Wiem, że jest to niemal odwrotność symulacji, której szukałeś (będziesz musiał napisać scenariusz aplikacji, aby był głównie używany przez mysz), ale mam nadzieję, że i tak to pomoże.

7

Przeglądarka na komputerze może symulować zdarzenia dotykowe, importując dodatkowe pliki JS + CSS. Spójrz:

  1. addTouch
  2. Phantom Limb
+1

Jeszcze inna opcja: http://mwbrooks.github.com/thumbs.js/ –

+0

@weird ... thumbs.js przedstawia dotykaj zdarzeń, które nie mają żadnych pól dotykowych, jakich bym się spodziewał (takich jak "dotknięcia")! – Michael

Powiązane problemy