移动端事件 - 爱码网

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no"/>
		<title></title>
		<style>
			
			#div1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<!--移动端的三大事件
			手指按下：ontouchstart
			手指移动：ontouchmove
			手指抬起：ontouchend
		
		注意：在移动端开发的时候，浏览器的模拟器时好时坏，一般不用on的方式绑定事件函数，要用事件绑定的方式。
		pc上的事件要比移动端上的事件要慢，大概是在300s左右
		-->
		
		<div id="div1">1</div>
		<script>
			var div = document.getElementById("div1");
			/*div.ontouchstart = function(){
				alert(1)
			}*/
			div.addEventListener("touchstart",start);
			div.addEventListener("touchmove",move);
			div.addEventListener('touchend',end);
			
			div.addEventListener('mouseup',up);
			function start(){
				console.log('按下')
			}
			function move(){
				console.log("移动");
			}
			function end(){
				console.log('抬起');
			}
			
			function up(){
				console.log('鼠标抬起');
			}	
		</script>
	</body>
</html>
移动端事件