<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>touchmove</title> <style> #tm{ position: absolute; top: 100px; left: 100px; width: 100px; height: 30px; background-color: blue; text-align: center; line-height: 30px; color: white; } </style> </head> <body> <div id="tm">touchmove</div> <script> var obj = document.getElementById('tm'); obj.addEventListener('touchstart', function(event){ obj.style.backgroundColor = 'red'; }); obj.addEventListener('touchend', function(event){ obj.style.backgroundColor = 'blue'; obj.innerHTML = 'touchmove'; }); obj.addEventListener('touchmove', function(event) { event.preventDefault(); var touch = event.targetTouches[0]; obj.style.left = touch.pageX-50 + 'px'; obj.style.top = touch.pageY-50 + 'px'; obj.innerHTML = 'x:' + touch.pageX + ', y:' + touch.pageY; }, false); </script> </body> </html>