<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>移动端touch事件</title> <style> #div{ width...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动端touch事件</title>
<style>
#div{
width: 100%;
height: 800px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
var div = document.getElementById('div');
div.addEventListener('touchstart',function(event){
// var ev = event || ev;
event.preventDefault();
div.style.background = 'red';
},false);
//touchstart 当手指触摸屏幕时
div.addEventListener('touchmove',function(event){
// var ev = event || ev;
event.preventDefault();
div.style.background = 'blue';
},false);
//touchmove 当手指在屏幕上移动时
div.addEventListener('touchend',function(event){
// var ev = event || ev;
event.preventDefault();
div.style.background = 'yellow';
},false);
//touchend 当手指划过屏幕时
</script>
</body>
</html>
