<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<style type="text/css">
.box{
height: 600px;
background: pink;
}
</style>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">

//0.获取元素

var box = document.querySelector('.box');

//1. 添加触摸开始事件

box.addEventListener('touchstart',function(e){

console.log('触摸开始')
//console.log(e)

})

//2. 添加触摸移动事件

box.addEventListener('touchmove',function(e){

//2.1获取触摸点

var ev = e.changedTouches[0];

//console.log(ev)
console.log('触摸移动'+ev.clientX+'=='+ev.clientY)

})
//3. 添加触摸取消事件

box.addEventListener('touchcancel',function(){

console.log('触摸意外取消')

})
//4. 添加触摸结束事件

box.addEventListener('touchend',function(){

console.log('触摸结束')

})

setTimeout(function(){
// alert()
},500)




</script>
</html>