老师这样写有没有需要优化的地方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box{
width: 150px;
height: 150px;
background-color: red;
margin:0 auto;
}
.page{
display: block;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<div>
<span class="page"></span>
<span class="page"></span>
<span class="page"></span>
</div>
<script type="text/javascript">
var box = document.getElementById('box');
var pages = document.querySelectorAll('.page');
console.log(pages);
box.addEventListener('touchstart',function(e){
box.style.backgroundColor = 'green';
var x = parseInt(e.changedTouches[0].pageX), y =parseInt(e.changedTouches[0].pageY);
pages[0].innerHTML="touch的开始位置"+x+","+y;
})
box.addEventListener('touchmove',function(e){
box.style.backgroundColor = 'yellow';
var x = parseInt(e.changedTouches[0].pageX), y =parseInt(e.changedTouches[0].pageY);
pages[1].innerHTML="touch的移动的位置"+x+","+y;
})
box.addEventListener('touchend',function(e){
box.style.backgroundColor = 'pink';
var x = parseInt(e.changedTouches[0].pageX), y =parseInt(e.changedTouches[0].pageY);
pages[2].innerHTML="touch的结束的位置"+x+","+y;
})
</script>
</body>
</html>
正在回答
同学你好，代码写的很棒，效果是对的，不需要优化了。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星