手机端TOUCH
client / clientY：// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY：// 触摸点相对于页面的位置
screenX /screenY：// 触摸点相对于屏幕的位置
identifier： // touch对象的unique ID
event.preventDefault();// 阻止浏览器默认事件，重要
touchstart: // 手指放到屏幕上的时候触发
touchmove: // 手指在屏幕上移动的时候触发
touchend: // 手指从屏幕上拿起的时候触发
touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详。。
<div style='height:500px;width:100%; border:1px solid #000;' id='canvas'>
<script>
var canvas = document.getElementById('canvas');
function touchStart(event){
event.preventDefault();
alert(123)
}
function touchMove(event){
event.preventDefault();
alert(456)
}
function touchEnd(event){
event.preventDefault();
alert(789)
}
canvas.addEventListener("touchstart", touchStart, false);
canvas.addEventListener("touchmove", touchMove, false);
canvas.addEventListener("touchend", touchEnd, false);
canvas.addEventListener("touchCancel", touchCancel, false);
</script>
EG:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta charset="gb2312" />
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="MobileOptimized" content="320">
<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
</head>
<style>
*{padding:0px;margin:0px; text-align:center;}
.spirit { /* 方块的class名称*/
position: absolute;
width: 50px;
height: 50px;
}
</style>
<body>
<div id="id"style="position:FIXED;width:50px;height:50px; </div>
<script>
/*单指拖动*/
var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
event.preventDefault();// 阻止浏览器默认事件，重要
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX-25 + 'px';
obj.style.top = touch.pageY-25 + 'px';
}
}, false);
</script>
</body>
</html>
