0

我正在 iOS 上编写一些 WebApp，用于为我的工作收集一些数据。但我发现它有一些问题。

我想写的程序很简单，一碰就让图片消失。所以我想出了这个非常简单的代码。

<!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>

此代码在 pc 的浏览器上运行良好。它如我所愿地响应。但是当我在 iphone 的 Safari 上运行它时。好像有点延迟。图片不会突然消失。似乎滞后了大约一秒钟。

你们可以在这里尝试使用 ios 的 Safari http://jjwestwind.tk/napp/

所以我该怎么做？有没有其他方法可以在 WebApp 上编写这种应用程序？或者我别无选择，只能回到原生应用程序？（这会给我提供给其他用户带来很多麻烦）

请帮我！太感谢了 ：）

4

1 回答 1

0

正如这个答案所建议的那样，它可能有助于消除点击延迟：删除点击延迟

或者使用这个FastClick 代码javascript 代码。

于 2013-02-09T22:56:23.183 回答