JavaScript WebApp mit Touchevents Debuggen

RauchenderDachs

Cadet 4th Year
Dabei seit
Dez. 2012
Beiträge
70
Hi Leute,

ich bin gerade dabei eine Webapp mit JS zu programieren. Ich bin auch schon soweit damit zufrieden allerding versuche ich es auf meinen IPhone mittels Touchevents zu steuern. Dazu habe ich folgenden code verwendet.

Code:
document.addEventListener("touchstart",shoot,false);//In shoot soll der Spiele schießen
das funktioniert auch soweit. Es wäre allerdings sehr schön wenn ich das mit den Touchevents auf meinen PC mit der Maus auch Debuggen könnte. Ich habe schon den Firefox OS Simulator ausprobiert doch er verlangt eine .webapp datei und ich weis nicht wie diese erstelle.

Desweiteren hab ich das Problem das ich einenem einzelnen DOM element diesen Eventlistener nicht geben kann. Im moment ist es so dass ich nur das canvas Element anklicken kann.

Im konkrete Funktioniert dieser Code nicht:
Code:
var box = document.getElementById("box");//Box ist eine einfache leere DIV box
    box.addEventListener("touchstart",shoot,false);
Wäre schön wenn ihr mir bei beiden Problemen helfen könntet.

Grüße RauchenderDachs
 

T0a5tbr0t

Lieutenant
Dabei seit
Apr. 2012
Beiträge
581
Im Firefox geht das unter STRG+SHIFT+M
Hmm, mit Event Delegation wäre ich bei Touch / Maus Events vorsichtig. Bei klick / touchstart geht das aber bei Dingen wie Touchmove wird es sehr Performance kritisch und man sollte dem "kleinst möglichem" Element das Event aufbinden.
Sicher, dass das Div auch die richtige Fläche abdeckt?
 

RauchenderDachs

Cadet 4th Year
Ersteller dieses Themas
Dabei seit
Dez. 2012
Beiträge
70
Danke für die Antowrten. Ich hab Chrome probiert und auch versucht die Touchenvents "anzuschalten" hat allerdings nicht funktioniert. Auch das mit Firefox und STRG+SHIFT+M hat nicht funktioniert bzw wäre hier auch eine etwas genauere Beschreibung schön.
Die Möglichkeit das das Div wo anders ist hab ich auch schon in betracht gezogen. Allerdings habe ich es gar nicht anders positioniert sondern einfach im Dokumenten Fluss drin gelassen.

Code:
#shoot{
    height:20px;
    width:20px;
    border:1px solid black;
    
    
}
so stehts im Stylsheet drin.

MFG RauchenderDachs
 

T0a5tbr0t

Lieutenant
Dabei seit
Apr. 2012
Beiträge
581
STRG+SHIFT+M und dann oben auf die kleine Hand klicken / Seite neu laden.
Im Chrome kann man sehr viel Emulieren, es ist neuerdings aber etwas komisch versteckt.
https://developers.google.com/chrome-developer-tools/docs/mobile-emulation?hl=de
Entwickler tools auf machen, dann ESC für die Konsole und da auf den "Emulation" Tab unter "Sensors"... WTF :D
Da kann man aber auch einfach ein Gerät zum "Emulieren" auswählen.
 
Top