2012-04-02 11 views
1

Nun, das wird ein harter sein. Ich denke, ich habe alle meine Möglichkeiten ausgeschöpft, lass uns sehen, ob du etwas besseres finden kannst.Steuern von Ereignissen auf Apple Ipad Safari

Ich habe ein horizontales Karussell und verwende Touchstart, Touchmove, Touchend, um es zu steuern. Aus Gründen der diesem Beispiel ist die HTML-Struktur so etwas wie:

<div> 
    <ul id="strip"> 
    <li><a>...</a></li> 
    <li><a>...</a></li> 
    ................... 
    </ul> 
</div> 

Ich habe meine Eventhandler getrennt ein wenig anders aus Maus zu verhalten Ereignisse zu berühren, so, nur der Berührung zu denken, ich habe:

var strip = document.getElementById('strip'); 
strip.addEventListener('touchstart', touchStartHandler); 
document.addEventListener('touchmove', touchMoveHandler); 
document.addEventListener('touchend', touchEndHandler); 

Ich möchte das horizontale Scrollen funktionieren, auch wenn der Benutzer seinen Finger außerhalb meines Streifens hat, also habe ich das Touchmove und Touchend-Ereignis an das Dokument angehängt.

Zuerst dachte ich, es wäre natürlich zu, während der Benutzer mein Karussell wurde Scrollen, für den Browser gesetzt zu bleiben, so meine touchMoveHandler sah so etwas wie:

function touchMoveHandler(evt){ 
    evt.preventDefault(); 
    ................... 
} 

... diese Weise Der Browser würde nicht vertikal schwenken, wenn der Finger des Benutzers in der Y-Achse variiert. Unser Usability-Typ denkt anders und ich stimme ihm jetzt wirklich zu. Er möchte, dass der Browser normal reagiert, es sei denn, die Bewegung des Fingers ist vollständig oder nahezu perfekt horizontal. Wie auch immer, dies ist wahrscheinlich zu viel Information, also werde ich jetzt mein aktuelles Problem ausführlich beschreiben. Dies ist ein Ausschnitt des Prototyps ich arbeite als Proof of Concept:

var stopY, lastTime, newTime; 

var touchStartHandler(evt){ 
    ... 
    stopY = true; 
    lastTime = new Date(); 
    ... 
}; 
var touchMoveHandler(evt){ 
    ... 
    //this following code works like a setInterval, it turns stopY on and off every 1/2 sec 
    //for some reason, setInterval doesn't play well inside a touchmove event 
    newTime = new Date(); 
    if(newTime - lastTime >= 500){ 
     stopY = !stopY; 
     lastTime = newTime; 
    } 
    ... 
    if(stopY){ 
     evt.preventDefault(); 
    } 
    ... 
} 

Ich bin absolut sicher, dass dieser Code pristine ist, i ausgetestet es mit Konsolenprotokolle und alles tut, was es soll, außer tun für das Pendeln des Browsers durch die stopY-Variable schwenken. Wenn ich den Code mit stopY = true starte, gibt es kein Browser-Panning. Wenn ich mit stopY = false beginne, schwenkt der Browser wie erwartet. Das Problem ist, dass ich erwarte, dass sich dieses Verhalten jede halbe Sekunde ändert und das nicht.

Ich hoffe, ich habe das nicht zu sehr für Sie kompliziert, aber das ist wirklich spezifisch.

Vielen Dank für Ihre Zeit und für Ihre Hilfe

Update:

können Sie die folgenden Links versuchen (auf einem iPad oder iPhone):
http://andrepadez.com/ipadtouch
http://andrepadez.com/ipadtouch?stopy=false

Verwendung Quelltext anzeigen , um den ganzen Code zu sehen

+0

Können Sie eine jsbin machen oder Geige? – shaun5

+0

ich werde, wenn ich die Zeit habe –

+0

@ shaun5 können Sie die Links verwenden, die ich gepostet habe, um es auszuprobieren. danke –

Antwort

1

Können Sie versuchen stopY = !stopY;?

UPDATE

Sobald Sie preventDefault() ausführen kann Scrollen erst touchend Feuer zurückkehren oder Sie es aktivieren. Folgendes kann Ihnen das Verhalten, das Sie suchen:

if(stopY){ return false; } 
else { return true; } 

oder der Einfachheit halber nur return !stopY; ...

+0

Sorry, ich werde es bearbeiten, ich kopierte/eingefügt von meinem Code, und ich arbeite an einem Objektbereich –

+0

@ AndréAlçadaPadez, ich habe meine Antwort aktualisiert. Vielleicht möchten Sie den Timer auf 2000 stellen, um das Verhalten des iPad zu untersuchen. Hoffentlich löst dies Ihr Problem! – shaun5

Verwandte Themen