这是一段移动端的代码 求大神给讲解一下JS是怎么实现触摸事件的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no"/>
<title>点触事件</title>
<style type="text/css">
body{
background-color:#666;
}
.dot{
width:60px;
height:60px;
background-color:#FFF;
border-radius:50%;
position:absolute;
}
</style>
</head>
<body>
<script type="text/javascript">
var dotObj = null;
window.onload = function(){
document.addEventListener('touchstart',function(e){
e.preventDefault();
var touch = e.touches[0];
if(dotObj){
console.log('esist');
} else{
dotObj = document.createElement('div');
dotObj.classList.add('dot');
document.body.appendChild(dotObj);
dotObj.style.left = touch.pageX-40+'px';
dotObj.style.top = touch.pageY-40+'px';
}
},false);
document.addEventListener('touchmove',function(e){
e.preventDefault();
if(dotObj){
var touch = e.touches[0];
dotObj.style.left = touch.pageX-40+'px';
dotObj.style.top = touch.pageY-40+'px';
}
},false);
document.addEventListener('touchend',function(e){
e.preventDefault();
if(dotObj){
document.body.removeChild(dotObj);
dotObj = null;
}
},false)
}
</script>
</body>
</html>
不告诉你ID2回答
-
化龙贝
三个事件：touchstart， touchmove, touchend
随时随地看视频慕课网APP
相关分类
JavaScript