                        課程
                    
                        /前端開發
                        
                            /WebApp
                        
                        /Hello，移動WEB

我的照抄的代碼沒效果

<!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>