Langsame Reaktion auf Klickereignis auf dem iPad

Question

Ich machte eine Demo eines Foto-Konzepts, das zwischen zwei Bildern hin- und herwechselt, um einen Unterschied zwischen ihnen zu zeigen.

Ich habe ein onMouseClick-Ereignis, das gut funktioniert, außer auf dem iPad. Die Antwort ist sofort auf meinem Desktop, aber ist auf dem Tablet ziemlich verzögert, vielleicht 500ms?

Ist das normal? Gibt es eine andere Möglichkeit, damit umzugehen?

Javascript:

var img1 = new Image(); 
img1.src = "http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg"; 

var img2 = new Image(); 
img2.src = "http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg"; 


function test() { 
    if (document.pic.src == 'http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg') { 

     document.pic.src = 'http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg'; 
    } 
    else if (document.pic.src == 'http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg') { 

     document.pic.src = 'http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg'; 
    } 
}​ 

Körper:

<div> 
    <table id="table-1" > 
    <tr><td> 
     <img id="img" src="http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg" name="pic" onMouseDown="test()"/> 
     <img id="png1" src="http://www.thedigitaltrekker.com/wp-content/uploads/2012/03/logo-6smA.png"/> 
Click on the image above to toggle between 19mm and 200mm <br> 
    </td></tr> 
    </table> 
</div> 
​ 

Auch auf jsfiddle: http://jsfiddle.net/ntmw/R4pey/5/

Answer 1

iOS verzögert gezielt Klick-Ereignisse, so dass Gesten/klauen Arbeit richtig. Wenn Sie beispielsweise ein Element berühren, möchten Sie möglicherweise die gesamte Seite scrollen, und nicht das Klickereignis für ein Element auslösen. Verwenden Sie Berührungsereignisse, um eine feinere Steuerung zu erreichen.

See: https://developer.mozilla.org/en-US/docs/DOM/Touch_events

Beispiel mit touchstart: http://jsfiddle.net/R4pey/7/.

Beachten Sie, dass die Erfassung von Berührungsereignissen Konsequenzen hat, z. Sie können ein Verhalten überschreiben, das der Benutzer erwartet (z. B. Wischen).

Beachten Sie auch, dass Sie Ihre Ereignisse normalerweise unabhängig von Ihrem Markup (nicht inline) binden sollten, um eine sauberere Trennung von Markup und Skript zu erreichen.

Here's an example Verwendung von jQuery, die die Ereignisse getrennt von der Markup bindet und beide click und touchstart Ereignisse verarbeitet. Getestet in Chrome 21, 15 FF, IE9 und auf dem iPad 3.

var url1 = "http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg"; 
var url2 = "http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg"; 

// preload from original code 
var img1 = new Image(); 
img1.src = url1; 

var img2 = new Image(); 
img2.src = url2; 

// bind the click and touchstart events 
$("#img").on("click touchstart", function(e){ 
    if (this.src == url1) { 
        this.src = url2; 
    } 
    else if (this.src == url2) { 
        this.src = url1; 
    }  

    // When touch event fires, this is needed to prevent the click 
    // event from firing as well as @RyanWheale noted in the comments. 
    e.preventDefault(); 
}); 

Answer 2

Ich habe einige Probleme mit Bildern auf IOS-Geräten erfahren. Zum Beispiel verwende ich HTML5-Verläufe und Schatten (auch Bilder) auf meiner Website und bemerkte einen großen Unterschied beim Entfernen der Bilder.

Das angefügte Klickereignis funktioniert einwandfrei, aber die Antwort ist langsam, da Safari mit den Bildern beschäftigt zu sein scheint (es wird ständig neu gezeichnet).

Ich habe ein iPad3 verwendet, um es zu testen. Ein Typ hat einen interessanten Artikel über die Bildprobleme auf IOS geschrieben.

See: http://roman.tao.at/dev/mobile-safari-memory-usage-with-images/

Answer 3

Check-out den folgenden Link für die schnellere und reaktions Tasten: https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE&csw=1

Answer 4

touchend Ereignis implementieren Handlers

Im Gegensatz zu Klick und Berührungsstart, touchend Ereignisse sind Feuer d sofort ohne 300ms Verzögerung. Dies kann praktisch sein, wenn Sie ein reines WebGL- oder Canvas-basiertes Spiel entwickeln, jedoch können Sie sich nicht ausschließlich auf Touch-Seiten in Standard-Webseiten verlassen.