selfhtml.de - Alles für den Webmaster!

Anzeige: united-domains - Die ganze Welt der Domains

onmousedown / touchstart EventHandlerproblem

Autor: ingoloos
Datum: 19.01.2012 21:07:53

Hallo Gemeinde,

ich habe im Netz ein schönes Script gefunden, welches Elemente "dragable" macht. Habe es angepasst wie nen Wilder und jetzt kann ich Bilder aus dem Anzeigebereich rausschieben und es erscheint ein Neues.

Eigentlich sollte diese Anwendung aber auf Smartphones funktionieren. Allerdings hab ich mittlerweile auch rausgefunden, dass es dort die Eventhandler: onmousedown, onmousemove und onmouseend nicht gibt - weil es dort eben keine Maus gibt. Macht Sinn!

Aber dafür gibt es ja die Event Handler: touchstart, touchmove, touchend.

Aber wie binde ich das ein? Hier ein Auszug aus dem Script, wo es rein soll. Ich habe die Kopfangaben drinnen gelassen, damit man sieht wohers ist, bzw. das ganze Script einsehen kann.

* dom-drag.js
* 09.25.2001
* http://www.youngpup.net
* Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005

var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper) {

// SO WARS IM SCRIPT URSPRÜNGLICH ANGEBRACHT
o.onmousedown = Drag.start;

// HIER MEIN VERSUCH DEN TOUCHSTART EINZUBINDEN
o.addEventListener('touchstart', function(){Drag.start;}, false);


o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;

... ganz viel Code ...

// SO WARS IM SCRIPT URSPRÜNGLICH ANGEBRACHT
document.onmousemove = Drag.drag;
document.onmouseup =  Drag.end;

// DANN GENAUSO DER NÄCHSTE VERSUCH VON MIR
o.addEventListener('touchmove', function(){Drag.drag;}, false);
o.addEventListener('touchend', function(){Drag.end;}, false);

.... noch mehr Code ...

Dass das wohl nicht richtig ist habe ich mittlerweile herausgefunden. Kann mir jemand weiterhelfen, wie das funktionieren hat, oder gleich sagen, dass es nicht geht. ;-)

Danke schon mal ihr lieben.

Grüße
Ingo

Re: onmousedown / touchstart EventHandlerproblem

Autor: Just95
Datum: 21.01.2012 14:55:22

Hallo,

dein Beispiel kann auch nicht funktionieren. addEventListener erwartet als 2. Argument eine Funktion, die du ja auch ganz normal mit einem Funktionseliteral erstellt hast es wird also bei deinem touchstart der Code

   Drag.start;

ausgeführt. Doch es ist ja auch nicht möglich einfach nur

   alert;

zu schreiben.
Meiner Meinung nach hättest du nun zwei Möglichkeiten:

   1. o.addEventListener('touchstart', function(e){Drag.start(e);}, false);

   2. o.addEventListener('touchstart', Drag.start, false);

beim ersten wird die Funktion dann korrekt mit dem Event Objekt als Parameter e aufgerufen, dies eignet sich wenn du vorhast vor oder nach Drag.start noch etwas auszuführen was bei dem Mousedown Event nicht passieren soll.
Beim zweiten wird direkt gesagt, dass der Browser Drag.start ausführen soll wenn touchstart eintritt.

gleiches gilt für die beiden anderen Events entsprechend.

Ich hab selbst noch nicht mit touch und Smartphones  gearbeitet aber generell trifft das oben beschriebene auf alle Events von Javascript zu und ließe sich daher auf dein Problem auch anwenden.

Unter: https://developer.mozilla.org/en/DOM/element.addEventListener wirds dann auch noch einmal genau beschrieben.

ich hoffe das ich helfen konnte.

Gruß
Just95

Re: onmousedown / touchstart EventHandlerproblem

Autor: ingoloos
Datum: 23.01.2012 08:00:21

Hallo Just95,

ich habe am Wochenende daran noch etwas weiter rumgebastelt und das Problem gehabt, dass er bereites beim Aufruf:

document.addEventListener eine Fehlermeldung gebracht hat, dass das Objekt diese Methode nicht unterstützt.

Habs dann komplett neu geschrieben und mich etwas intensiver mit den Touch-Events auseinander gesetzt. Ich habe jetzt eine Lösung gefunden in der ich auf die Scriptbibliothek verzichtet habe und die Bewegung des Div-Containers mit eigenem Code umgesetzt habe.

Das schien mir dann doch die beste Lösung.

Danke trotzdem für dein Feedback.

Grüße
Ingo