版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/z_x_Qiang/article/details/86172881
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.item{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 300px;
height:300px;
background: pink;
}
</style>
</head>
<body>
<div class="item"></div>
</body>
<script type="text/javascript">
window.onload=function(){
document.addEventListener("touchstart",function(ev){
ev=ev||event;
ev.preventDefault();
})
var item = document.querySelector(".item");
//changedTouches:触发当前事件的手指列表
//targetTouches:触发当前事件时元素上的手指列表
//touches:触发当前事件时屏幕上的手指列表
item.addEventListener("touchend",function(ev){
ev = ev||event;
var item = document.querySelector(".item");
item.innerHTML="changed:"+ev.changedTouches.length+"<br/>";
item.innerHTML+="target:"+ev.targetTouches.length+"<br/>";
item.innerHTML+="touches:"+ev.touches.length+"<br/>";
console.log(ev)
})
}
</script>
</html>