J'écris une application Web sur iOS, à utiliser pour recueillir des données pour mon travail. Mais j'ai trouvé un problème avec ça.Comment écrire un code de réponse instantanée sur iOS WebApp?
Le programme que je veux écrire est très simple, faire disparaître l'image lorsque vous le touchez. Donc, je viens avec ce code très simple.
<!DOCTYPE HTML>
<html lang="en-US" manifest="manifest.mf">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0;">
<link rel="apple-touch-icon-precomposed" href="icon.png"/>
<style type="text/css">
*{
-webkit-touch-callout: none;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
function show_coords(event)
{
var x=event.offsetX;
var y=event.offsetY;
//alert("X coords: " + x + ", Y coords: " + y);
$("#result p").text("coX= "+x+" coY= " +y);
}
$(document).ready(function() {
$('img').each(function() {
$(this).click(function() {
$(this).stop().animate({ opacity: 1.0 }, 1);
},
function() {
$(this).stop().animate({ opacity: 0.0 }, 0);
});
});
});
</script>
<title>DataCollect</title>
</head>
<body>
<img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><br>
<img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><br>
<img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><br>
<img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><br>
<img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><br>
<div id='result'>
<p></p>
</div>
</body>
</html>
Ce code fonctionne très bien sur le navigateur du PC. C'est une réponse au soleil comme je le veux. Mais quand je le lance sur Safari de l'iPhone. Cela semble un peu retardé. l'image ne disparaît pas soudainement. On dirait que ça traîne une petite seconde.
les gars, vous pouvez essayer sur votre ios de Safari ici http://jjwestwind.tk/napp/
Alors, que dois-je faire? Existe-t-il un autre moyen d'écrire ce type d'application sur WebApp? Ou je n'ai pas d'autre choix que de revenir à l'application native? (ce qui causera beaucoup de problèmes pour moi de le fournir aux autres utilisateurs)
aidez-moi s'il vous plaît! Merci beaucoup :)
Ce délai est présent car contrairement aux navigateurs de bureau, les navigateurs mobiles gèrent un double-clic. Donc, le navigateur attend de s'assurer que ce n'est pas un double-clic. FastClick ou une bibliothèque JS similaire résoudra le problème. Habituellement, ce délai est d'environ 0,3 seconde. – demosten
ce délai de clic et comment le résoudre est très nouveau pour moi! merci beaucoup pour votre suggestion :) – Syaorankun