touch事件(寻找触摸点 e.changedTouches)

时间:2023-03-09 02:37:22
touch事件(寻找触摸点  e.changedTouches)
<!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>