代码改变世界

一段touch代码在使用bind之后所犯的错误

2011-11-14 11:56  呦菜  阅读(634)  评论(0)    收藏  举报

这段代码的主要功能是在Android手机上触屏之后会产生一个红色的小区域，然后能根据手指进行拖拽，源代码在touch事件的小例子一文中，原来是addEventListener方法，后来因为需要使用bind，所以在修改过程中出现了诸多问题，以下是正确代码：

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>jQuery Mobile Web 应用程序</title>
<!--<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>-->
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<!--<script src="jquery-mobile/jquery.mobile-1.0a3.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="margin:0;padding:0;">
<div>  
<div id="canvas" style="width:100%; border:1px solid #F00;">sssssssssssss</div>
<div id="value"></div>
</div>
  
</body>
<script type="text/javascript">
// define global variable
var canvas = $("#canvas"),spirit, startX, startY;
 // touch start listener
 
function touchStart(event) {
	//alert(event.type);
	 event.preventDefault();
     event=event.originalEvent||event;
	//alert(event.touches.length);

 if (spirit ||! event.touches.length) return;
 var touch = event.touches[0]||event.changedTouches[0];
 startX = touch.pageX;
 startY = touch.pageY;
 spirit = document.createElement("div");
 spirit.className ="spirit";
 spirit.style.left = startX;
 spirit.style.top = startY;
 canvas.append(spirit);
}
 
// add touch start listener
canvas.bind("touchstart", touchStart);
 
function touchMove(event) {
 event.preventDefault();
 event=event.originalEvent||event;
 if (!spirit ||!event.touches.length) return;
 var touch = event.touches[0]||event.changedTouches[0];
 x = touch.pageX-startX,
 y = touch.pageY-startY;
 spirit.style.webkitTransform ='translate('+ x +'px, '+ y +'px)'; 
}
 
canvas.bind("touchmove", touchMove);
 
function touchEnd(event) {
event.preventDefault();
 event=event.originalEvent||event;
 if(!spirit) return;
// canvas.remove(spirit);
$(".spirit").remove();
 spirit =null;
}
canvas.bind("touchend", touchEnd);
</script>
</html>

 对于这段代码在写的过程中犯了以下几个错误：

1. 我刚开始写获取canvas是用document.getElementById方法，却忘了bind是jquery的方法，这为其一

2. 缺少event=event.originalEvent||event;这一句，使得touch事件无法获取。应该将event改为原生的event事件

总之是对jquery与原生js方法的不熟悉导致的代码错误，以后需要改正