您的位置：首页 > 移动开发

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

2016-11-19 13:53 537 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

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

相关文章推荐

新的分享

章节导航