<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="js/zepto.min.js"></script>
<style>
.touchPad{
width:100%;
height:500px;
background: #ddd;
font-size: 60px;
}
.ball{
display: none;
position: absolute;
width: 25px;
height:25px;
border-radius: 15px;
background: #4bcffe;
top:0;
left:0;
}
p{
height:30px;
}
</style>
<title>touch实例</title>
</head>
<body>
<p id="desc"></p>
<div id="touchPad" class="touchPad">触屏板</div>
<div id="ball" class="ball"></div>
</body>
<script>
var touchpad = document.querySelector("#touchPad"),
ball = document.querySelector("#ball"),
desc = document.querySelector("#desc");
var toucjHandler = function(e){
var type = e.type;
if(type!=="touchend"){
var pos = {
x : e.touches[0].clientX,
y : e.touches[0].clientY
}
ball.style.left = pos.x + "px";
ball.style.top = pos.y + "px";
desc.innerHTML = e.type + "(横轴：" + pos.x + "纵轴：" + pos.y + ")";
}else{
desc.innerHTML = e.type;
}
switch(type){
case 'touchstart':
ball.style.display = 'block';
break;
case 'touchmove':
event.preventDefault();
break;
case 'touchend':
ball.style.display = 'none';
break;
}
}
touchpad.addEventListener('touchstart',touchHandler);
touchpad.addEventListener('touchmove',touchHandler);
touchpad.addEventListener('touchend',touchHandler);
</script>
</html>
1. 文件未引入 : zepto.min.js引入了没
2. 代码错误 : 查找 toucjHandler 改成 touchHandler
这小错误 , 浏览器控制台应该有提示的吧 , 不过一天前的你应该已经解决了
所以 : 我是来混积分的