JavaScript Touch events

Mr. Poe · 28. Dezember 2013

hallo,

ich möchte mir eine kleine webseite bauen, die ich vom tablet aus bedienen kann.

aufm pc funktionierts... aber aufm tablet nicht.

das div soll einfach seine farbe beim anklicken ändern mehr nicht bis jetzt.

Code:

<div class="div_test" id="test" align="center" onmousedown="this.style.backgroundColor = 'yellow'" onmouseup="this.style.backgroundColor = '#808080'"></div>

hab das auch schon mit ontouchstart und ontouchend probiert...
auf meinem windows 8 tablet mit firefox geht das nicht... aber aufm desktop pc (auch mit firefox) gehts...

fz21z · 28. Dezember 2013

Kenne deinen restlichen Code nicht, aber das Beispiel hier funktioniert.
http://jsfiddle.net/e7Kya/

Mr. Poe · 28. Dezember 2013

ja mein code funktioniert ja auch, wenn ich mit einer maus drauf klicke...
aber wenn ich aufm touchscreen drauf touche passiert nix.

gib das mal ein:

CSS:

Code:

#test{position:absolute; top:10px; left:80px;}
.div_test{background-color:#808080; width:60px; height:60px;}

HTML:

Code:

<body>
    <div class="div_test" id="test" align="center" onmousedown="this.style.backgroundColor = 'yellow'" onmouseup="this.style.backgroundColor = '#808080'"></div>
</body>

das geht bei mir aufm pc... aber nicht aufm tablet.

ich will bis jetzt einfach nur, das das aufm tablet so wie am pc funktioniert.

Daaron · 28. Dezember 2013

Lass mich raten: Du verwendest den IE auf dem Tablet?
Microsoft kochen mal wieder ihr eigenes Süppchen und verwenden nicht die Touch API, die Apple für iOS entwickelt hat und von Google für Android übernommen wurde. Statt dessen setzen Microsoft auf eine vereinheitlichte Schnittstelle zwischen allen "Pointer Devices".... Idee gut, Timing & Ausführung mies.

Mr. Poe · 28. Dezember 2013

ich hab doch im ersten post geschrieben, das ich firefox verwende -.-

auf beiden geräten die aktuellste firefox version installiert. (aufm tablet läuft der im desktop modus)

Daaron · 28. Dezember 2013

ok. übersehen... was passiert, wenn du einfach mal dem Element ein ontouchstart="console.log('bla');" mitgibst, und sonst nix? Was passiert, wenn du die Scripts nicht inline schreibst, sondern nachträglich an das DOM Element bindest?

T0a5tbr0t · 29. Dezember 2013

Code:

["mousedown", "mouseup", "click", "touchstart", "touchend"].forEach(function(event) {
    document.body.addEventListener(event, function(e) {
        console.log(e.type);
    });
});

Konsole öffnen und gucken was passiert. Das Verhalten hängt immer stark von Browser / System ab. Normal wird alles in mouse-events "übersetzt" und touch-events gibt es dann zusätzlich. Bei Windows 8 im nicht-app-modus (also Desktop) muss man touch-events in Chrome / Firefox per flags / config aktivieren. Klicks sollten aber normal immer gehen. So war es zumindest bei meinem letzten Test mit nem 8er Tablet.
Kommt vllt auch drauf an, ob man das Ding per Finger oder Stift bedient.

Teisi · 30. Dezember 2013

sers,
da hast du wohl nen denk fehler drin, es gibt auf normalen tablets keine mouse (auf nem asus transformer mit tastatur würde das wohl gehen, da es hier auch eine mouse gibt), von daher auch kein mouse down oder up...
das kannst du per javascript evtl. jquery oder jquery mobile lösen, bei letzterem gibt es z.b. touch events, bei ersterem wäre das wohl "on("click"..."
sonst fällt mir dazu grad nix ein... sry

Suche

JavaScript Touch events

Mr. Poe

Lt. Commander

fz21z

Lt. Junior Grade

Mr. Poe

Lt. Commander

Daaron

Fleet Admiral

Mr. Poe

Lt. Commander

Daaron

Fleet Admiral

T0a5tbr0t

Lieutenant

Teisi

Lt. Junior Grade

Ähnliche Themen