JavaScript WebApp mit Touchevents Debuggen

[RauchenderDachs]

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.

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:

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

 

[Daaron]

Chrome unterstützt schon seit Ewigkeiten die Simulation von Touch-Events via Maus.
Und bei deinen Events... http://davidwalsh.name/event-delegate

 

[T0a5tbr0t]

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]

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.

#shoot{
    height:20px;
    width:20px;
    border:1px solid black;
    
    
}

so stehts im Stylsheet drin.

MFG RauchenderDachs

 

[T0a5tbr0t]

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
Da kann man aber auch einfach ein Gerät zum "Emulieren" auswählen.

 

[RauchenderDachs]

Ok vielen Dank