WEB前端 | JS基础——(11)移动端事件

最新推荐文章于 2024-01-19 09:43:37 发布

Erosvan

最新推荐文章于 2024-01-19 09:43:37 发布

阅读量605

点赞数 1

CC 4.0 BY-SA版权

文章标签： JS基础 Web前端移动端事件移动端事件

本文链接：https://blog.youkuaiyun.com/Erosvan/article/details/53229643

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>移动端事件</title>
		<meta name="viewport" content="width=device-width,maximum-scale=3.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=0,target-densitydpi=device-dpi"/>
		<style type="text/css">
			.div {
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="div"></div>
	</body>
	<script type="text/javascript">
		var div = document.getElementsByClassName('div')[0];
//		div.onclick = function() {
//			document.write('点击');
//		}
		// PC端的一些鼠标事件会在移动端转化成相应的触摸事件。
		
		div.addEventListener('touchstart',function(ev){
			div.innerHTML = 'x:'+ ev.targetTouches[0].clientX + ' y:' + ev.targetTouches[0].clientY;
		},false);
		document.addEventListener('touchmove',function(ev){
			// 阻止手机页面滑动
			ev.preventDefault();
			var a = parseInt(Math.random()*255);
			var b = parseInt(Math.random()*255);
			var c = parseInt(Math.random()*255);
			div.style.backgroundColor = 'rgb('+a+','+b+','+c+')';
		},false)
	</script>
</html>