先上实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>touch</title>
<style type="text/css">
body{
height: 100%;
margin: 0;
padding: 0;
}
#canvas{
position: relative;
width: 100%;
height: 1000px;
}
.spirit { /* 方块的class名称*/
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="canvas"></div>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var 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+"px";
spirit.style.top = startY+"px";
canvas.appendChild(spirit);
console.log(startX);
}
// 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];
var x = touch.pageX-startX;
var y = touch.pageY-startY;
spirit.style.webkitTransform = ‘translate(‘+x+ ‘px, ‘+y+‘px)‘;
console.log(2);
}
canvas.addEventListener("touchmove", touchMove, false);
function touchEnd(event){
if(!spirit)return;
canvas.removeChild(spirit);
spirit=null
}
canvas.addEventListener("touchend",touchEnd,false);
</script>
</body>
</html>运行时，触摸处会出现一个红色正方形，跟随鼠标滑动
知识点：
处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：
touchstart: // 手指放到屏幕上的时候触发
touchmove: // 手指在屏幕上移动的时候触发
touchend: // 手指从屏幕上拿起的时候触发
touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详。。在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新
的meego系统都模拟了类似的对象，这里只针对iOS，因为我只有iPad可用于测试。。）。这个对象封装一次
屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以通过touch event handler的event对象取到
（一般是通过event.changedTouches属性）。这个对象包括一些重要的属性：
client / clientY：// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY：// 触摸点相对于页面的位置
screenX /screenY：// 触摸点相对于屏幕的位置
identifier： // touch对象的unique ID版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-10-09 20:33:22