Hören auf JavaScript-Touch-Ereignisse, aber gleichzeitig das standardmäßige Bildlaufverhalten zulassen.

Question

Ich versuche, ein scrollbares Element für eine mobile App zu implementieren und es sieht so aus, als müssten Sie preventDefault auf dem initialen touchStart-Ereignis verwenden, sonst wird der Browser nicht alle touchMove-Ereignisse auslösen (vermutlich aus Leistungsgründen).

Es scheint also, dass wenn ich das Touch-Scrolling auf einem überlaufenden Element ermöglichen möchte, der Benutzer die Seite nicht wie gewohnt scrollen kann, wenn er dieses Element berührt. Dies ist problematisch, wenn das überlaufende Element einen großen Teil des Viewports einnimmt.

Gibt es einen Workaround für das?

Answer 1

Schau dir diese Bibliothek an

http://api.mutado.com/mobile/mtdtouch/js/

Das "Kern"-Javascript enthält eine optimierte Basis-UIComponent für Touch-Events (Webkit). Das UI.Scroll-Komponente im Beispiel übernimmt das "prevent default issue" für dich.

Versuche die UIComponent zu subklassifizieren und implementiere deine eigenen Event-Handler so wie hier

$MTD.YourOwnComponent = $.klass( $MTD.UIComponent, {    

    touchesBegan: function( e ) {
        // deine Inhalte
    },

    touchesMoved: function( e ) {
        // deine Inhalte   
    },

    touchesEnded: function( e ) {
        // deine Inhalte
    }

});

Hoffe das hilft.

Answer 2

Hier ist ein einfacher Workaround: Verzichte auf den touchstart Handler. Du kannst das meiste von dem, was passiert, nur mit den touchmove, touchend und touchleaving Handlern nachbilden.

Im Browser, den ich getestet habe (Chrome), wird gescrollt, solange du keinen touchstart Handler hast; die anderen sind ihm egal. Solange du in den touchmove Handlern nicht aktiv ev.preventDefault aufrufst, funktioniert das Scrollen.

Unter der Annahme, dass das, was du tun möchtest, trotzdem gut funktioniert, obwohl du nur herausfindest, dass eine Berührung stattfindet, wenn der Finger sich bereits bewegt, sollte dieser Workaround akzeptabel funktionieren.

... Und außerdem gehe ich davon aus, dass andere Browser die gleiche Logik wie Chrome nutzen.