webApp 之多点触摸

最新推荐文章于 2022-12-14 12:03:33 发布

启之灵

最新推荐文章于 2022-12-14 12:03:33 发布

阅读量245

点赞数

分类专栏： Html 5 文章标签： webapp

本文链接：https://blog.csdn.net/z_x_Qiang/article/details/86172881

版权

Html 5 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

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