代码改变世界

touch事件的小例子

2011-11-03 14:06  呦菜  阅读(919)  评论(0)  编辑  收藏  举报 
<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>jQuery Mobile Web 应用程序</title>
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<!-- 只要将当前站点配置为移动应用程序，则对 phonegap.js 的该引用将允许代码提示。
	 要将该站点配置为移动应用程序，请转至“站点”->“移动应用程序”->“配置应用程序框架...”-->
<script src="/phonegap.js" type="text/javascript"></script>
<style type="text/css">
.spirit {              /* 方块的class名称*/
         position: absolute;
         width: 50px;
         height: 50px;
         background-color: red;
}
</style>
</head> 
<body style="height:100%; width:100%;margin:0;padding:0;">
 
<div id="canvas"  style="width:100%;height: 100%; border:1px solid #F00;">sssssssssssss</div>
 
</body>
<script type="text/javascript">
// define global variable
 var canvas = document.getElementById("canvas"),spirit, startX, startY;
    // touch start listener
 
function touchStart(event) {
         event.preventDefault();
         if (spirit ||! event.touches.length) return;
         var touch = event.touches[0];
         startX = touch.pageX;
         startY = touch.pageY;
         spirit = document.createElement("div");
         spirit.className = "spirit";
         spirit.style.left = startX;
         spirit.style.top = startY;
         canvas.appendChild(spirit);
}
 
// add touch start listener
canvas.addEventListener("touchstart", touchStart, false);

function touchMove(event) {
 event.preventDefault();
         if (!spirit || !event.touches.length) return;
         var touch = event.touches[0],
              x = touch.pageX-startX,
              y = touch.pageY-startY;
         spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';     
}
 
canvas.addEventListener("touchmove", touchMove, false);

function touchEnd(event) {
         if(!spirit) return;
         canvas.removeChild(spirit);
         spirit = null;
}
 
canvas.addEventListener("touchend", touchEnd, false);
</script>
</html>

 来自：http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html