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